Refactor #3965 - For FileUpload
Tuğçe Küçükoğlu
parent
ec55a35a32
commit
9a49c162c1
|
|
@ -0,0 +1,189 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-fileupload-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-fileupload-content .p-progressbar {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-button.p-fileupload-choose {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-fileupload-buttonbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-fileupload > input[type='file'],
|
||||
.p-fileupload-basic input[type='file'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-fluid .p-fileupload .p-button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-fileupload-file {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-fileupload-file-thumbnail {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-fileupload-file-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
|
||||
buttonbar: 'p-fileupload-buttonbar',
|
||||
chooseButton: ({ instance, props }) => [
|
||||
'p-button p-component p-fileupload-choose',
|
||||
{
|
||||
'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
chooseIcon: 'p-button-icon p-button-icon-left',
|
||||
chooseButtonLabel: 'p-button-label',
|
||||
content: 'p-fileupload-content',
|
||||
empty: 'p-fileupload-empty',
|
||||
uploadIcon: 'p-button-icon p-button-icon-left',
|
||||
label: 'p-button-label',
|
||||
file: 'p-fileupload-file',
|
||||
thumbnail: 'p-fileupload-file-thumbnail',
|
||||
details: 'p-fileupload-file-details',
|
||||
fileName: 'p-fileupload-file-name',
|
||||
fileSize: 'p-fileupload-file-size',
|
||||
badge: 'p-fileupload-file-badge',
|
||||
actions: 'p-fileupload-file-actions',
|
||||
removeButton: 'p-fileupload-file-remove'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { id: 'primevue_fileupload_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseFileUpload',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'advanced'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxFileSize: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
invalidFileSizeMessage: {
|
||||
type: String,
|
||||
default: '{0}: Invalid file size, file size should be smaller than {1}.'
|
||||
},
|
||||
invalidFileTypeMessage: {
|
||||
type: String,
|
||||
default: '{0}: Invalid file type, allowed file types: {1}.'
|
||||
},
|
||||
fileLimit: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
invalidFileLimitMessage: {
|
||||
type: String,
|
||||
default: 'Maximum number of files exceeded, limit is {0} at most.'
|
||||
},
|
||||
withCredentials: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
previewWidth: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
chooseLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
uploadLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
cancelLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
customUpload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showUploadButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showCancelButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chooseIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
uploadIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
cancelIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
style: null,
|
||||
class: null
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-file" v-bind="ptm('file')">
|
||||
<img role="presentation" class="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" v-bind="ptm('thumbnail')" />
|
||||
<div class="p-fileupload-file-details" v-bind="ptm('details')">
|
||||
<div class="p-fileupload-file-name" v-bind="ptm('fileName')">{{ file.name }}</div>
|
||||
<span class="p-fileupload-file-size" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
|
||||
<FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" :pt="ptm('badge')" />
|
||||
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" :class="cx('file')" v-bind="ptm('file')">
|
||||
<img role="presentation" :class="cx('thumbnail')" :alt="file.name" :src="file.objectURL" :width="previewWidth" v-bind="ptm('thumbnail')" />
|
||||
<div :class="cx('details')" v-bind="ptm('details')">
|
||||
<div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
|
||||
<span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
|
||||
<FileUploadBadge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :pt="ptm('badge')" />
|
||||
</div>
|
||||
<div class="p-fileupload-file-actions" v-bind="ptm('actions')">
|
||||
<FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove" :pt="ptm('removeButton')">
|
||||
<div :class="cx('actions')" v-bind="ptm('actions')">
|
||||
<FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" :class="cx('removeButton')" :pt="ptm('removeButton')">
|
||||
<template #icon="iconProps">
|
||||
<component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
|
||||
<TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('removeButton')['icon']" />
|
||||
|
|
|
|||
|
|
@ -243,10 +243,6 @@ export interface FileUploadPassThroughOptions {
|
|||
* Uses to pass attributes to the label's DOM element.
|
||||
*/
|
||||
label?: FileUploadPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the basic button's DOM element.
|
||||
*/
|
||||
basicButton?: FileUploadPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the upload icon's DOM element.
|
||||
*/
|
||||
|
|
@ -411,6 +407,11 @@ export interface FileUploadProps {
|
|||
* @type {FileUploadPassThroughOptions}
|
||||
*/
|
||||
pt?: FileUploadPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div v-if="isAdvanced" class="p-fileupload p-fileupload-advanced p-component" v-bind="ptm('root')">
|
||||
<div v-if="isAdvanced" :class="cx('root')" v-bind="ptm('root')" data-pc-name="fileupload">
|
||||
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
|
||||
<div class="p-fileupload-buttonbar" v-bind="ptm('buttonbar')">
|
||||
<div :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
|
||||
<slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
|
||||
<span v-ripple :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('chooseButton')">
|
||||
<slot name="chooseicon">
|
||||
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" />
|
||||
<span v-ripple :class="chooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('chooseButton')">
|
||||
<slot name="chooseicon" :class="cx('chooseIcon')">
|
||||
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" />
|
||||
</slot>
|
||||
<span class="p-button-label" v-bind="ptm('chooseButtonLabel')">{{ chooseButtonLabel }}</span>
|
||||
<span :class="cx('chooseButtonLabel')" v-bind="ptm('chooseButtonLabel')">{{ chooseButtonLabel }}</span>
|
||||
</span>
|
||||
<FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :pt="ptm('uploadButton')">
|
||||
<template #icon="iconProps">
|
||||
|
|
@ -25,35 +25,34 @@
|
|||
</FileUploadButton>
|
||||
</slot>
|
||||
</div>
|
||||
<div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')">
|
||||
<div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false">
|
||||
<slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
|
||||
<FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" :pt="ptm('progressbar')" />
|
||||
<FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :pt="ptm('message')">{{ msg }}</FileUploadMessage>
|
||||
<FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :pt="pt" />
|
||||
<FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :pt="pt" />
|
||||
</slot>
|
||||
<div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" class="p-fileupload-empty" v-bind="ptm('empty')">
|
||||
<div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" :class="cx('empty')" v-bind="ptm('empty')">
|
||||
<slot name="empty"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="isBasic" class="p-fileupload p-fileupload-basic p-component" v-bind="ptm('root')">
|
||||
<div v-else-if="isBasic" :class="cx('root')" v-bind="ptm('root')" data-pc-name="fileupload">
|
||||
<FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :pt="ptm('messages')">{{ msg }}</FileUploadMessage>
|
||||
<span v-ripple :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('basicButton')">
|
||||
<slot v-if="!hasFiles || auto" name="uploadicon">
|
||||
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="['p-button-icon p-button-icon-left', uploadIcon]" aria-hidden="true" v-bind="ptm('uploadIcon')" />
|
||||
<span v-ripple :class="chooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('chooseButton')">
|
||||
<slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')">
|
||||
<component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[cx('uploadIcon'), uploadIcon]" aria-hidden="true" v-bind="ptm('uploadIcon')" />
|
||||
</slot>
|
||||
<slot v-else name="chooseicon">
|
||||
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" />
|
||||
<slot v-else name="chooseicon" :class="cx('chooseIcon')">
|
||||
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" />
|
||||
</slot>
|
||||
<span class="p-button-label" v-bind="ptm('label')">{{ basicChooseButtonLabel }}</span>
|
||||
<span :class="cx('label')" v-bind="ptm('label')">{{ basicChooseButtonLabel }}</span>
|
||||
<input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-bind="ptm('input')" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import Button from 'primevue/button';
|
||||
import PlusIcon from 'primevue/icons/plus';
|
||||
import TimesIcon from 'primevue/icons/times';
|
||||
|
|
@ -61,109 +60,13 @@ import UploadIcon from 'primevue/icons/upload';
|
|||
import Message from 'primevue/message';
|
||||
import ProgressBar from 'primevue/progressbar';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import { DomHandler } from 'primevue/utils';
|
||||
import BaseFileUpload from './BaseFileUpload.vue';
|
||||
import FileContent from './FileContent.vue';
|
||||
|
||||
export default {
|
||||
name: 'FileUpload',
|
||||
extends: BaseComponent,
|
||||
extends: BaseFileUpload,
|
||||
emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear', 'remove', 'remove-uploaded-file'],
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'advanced'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxFileSize: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
invalidFileSizeMessage: {
|
||||
type: String,
|
||||
default: '{0}: Invalid file size, file size should be smaller than {1}.'
|
||||
},
|
||||
invalidFileTypeMessage: {
|
||||
type: String,
|
||||
default: '{0}: Invalid file type, allowed file types: {1}.'
|
||||
},
|
||||
fileLimit: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
invalidFileLimitMessage: {
|
||||
type: String,
|
||||
default: 'Maximum number of files exceeded, limit is {0} at most.'
|
||||
},
|
||||
withCredentials: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
previewWidth: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
chooseLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
uploadLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
cancelLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
customUpload: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showUploadButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showCancelButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chooseIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
uploadIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
cancelIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
style: null,
|
||||
class: null
|
||||
},
|
||||
duplicateIEEvent: false,
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -362,19 +265,19 @@ export default {
|
|||
},
|
||||
onDragOver(event) {
|
||||
if (!this.disabled) {
|
||||
DomHandler.addClass(this.$refs.content, 'p-fileupload-highlight');
|
||||
this.$refs.content.setAttribute('data-p-highlight', true);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
onDragLeave() {
|
||||
if (!this.disabled) {
|
||||
DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
|
||||
this.$refs.content.setAttribute('data-p-highlight', false);
|
||||
}
|
||||
},
|
||||
onDrop(event) {
|
||||
if (!this.disabled) {
|
||||
DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
|
||||
this.$refs.content.setAttribute('data-p-highlight', false);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
|
|
@ -453,26 +356,8 @@ export default {
|
|||
isBasic() {
|
||||
return this.mode === 'basic';
|
||||
},
|
||||
advancedChooseButtonClass() {
|
||||
return [
|
||||
'p-button p-component p-fileupload-choose',
|
||||
this.class,
|
||||
{
|
||||
'p-disabled': this.disabled,
|
||||
'p-focus': this.focused
|
||||
}
|
||||
];
|
||||
},
|
||||
basicChooseButtonClass() {
|
||||
return [
|
||||
'p-button p-component p-fileupload-choose',
|
||||
this.class,
|
||||
{
|
||||
'p-fileupload-choose-selected': this.hasFiles,
|
||||
'p-disabled': this.disabled,
|
||||
'p-focus': this.focused
|
||||
}
|
||||
];
|
||||
chooseButtonClass() {
|
||||
return [this.cx('chooseButton'), this.class];
|
||||
},
|
||||
basicChooseButtonLabel() {
|
||||
return this.auto ? this.chooseButtonLabel : this.hasFiles ? this.files.map((f) => f.name).join(', ') : this.chooseButtonLabel;
|
||||
|
|
@ -522,49 +407,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-fileupload-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-fileupload-content .p-progressbar {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-button.p-fileupload-choose {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-fileupload-buttonbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-fileupload > input[type='file'],
|
||||
.p-fileupload-basic input[type='file'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-fluid .p-fileupload .p-button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-fileupload-file {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-fileupload-file-thumbnail {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-fileupload-file-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue