Refactor #3965 - For FileUpload

components/lib/fileupload/BaseFileUpload.vue

@@ -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>

components/lib/fileupload/FileContent.vue

@@ -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')">
+    <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="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" v-bind="ptm('thumbnail')" />
+        <img role="presentation" :class="cx('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="cx('details')" v-bind="ptm('details')">
-            <div class="p-fileupload-file-name" v-bind="ptm('fileName')">{{ file.name }}</div>
+            <div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
-            <span class="p-fileupload-file-size" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
+            <span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
-            <FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" :pt="ptm('badge')" />
+            <FileUploadBadge :value="badgeValue" :class="cx('badge')" :severity="badgeSeverity" :pt="ptm('badge')" />
         </div>
-        <div class="p-fileupload-file-actions" v-bind="ptm('actions')">
+        <div :class="cx('actions')" v-bind="ptm('actions')">
-            <FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove" :pt="ptm('removeButton')">
+            <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']" />

components/lib/fileupload/FileUpload.d.ts

@@ -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;
 }
 
 /**

components/lib/fileupload/FileUpload.vue

@@ -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')">
+                <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">
+                    <slot name="chooseicon" :class="cx('chooseIcon')">
-                        <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" v-bind="ptm('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')">
+        <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">
+            <slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')">
-                <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="['p-button-icon p-button-icon-left', uploadIcon]" aria-hidden="true" v-bind="ptm('uploadIcon')" />
+                <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[cx('uploadIcon'), uploadIcon]" aria-hidden="true" v-bind="ptm('uploadIcon')" />
             </slot>
-            <slot v-else name="chooseicon">
+            <slot v-else name="chooseicon" :class="cx('chooseIcon')">
-                <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" v-bind="ptm('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() {
+        chooseButtonClass() {
-            return [
+            return [this.cx('chooseButton'), this.class];
-                '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
-                }
-            ];
         },
         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>