primevue 3.16.2 → 3.18.0

package/fileupload/FileUpload.vue

@@ -1,54 +1,49 @@
 <template>
-    <div class="p-fileupload p-fileupload-advanced p-component" v-if="isAdvanced">
+    <div v-if="isAdvanced" class="p-fileupload p-fileupload-advanced p-component">
+        <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" />
         <div class="p-fileupload-buttonbar">
-            <span :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0">
-                <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" />
-                <span :class="advancedChooseIconClass"></span>
-                <span class="p-button-label">{{chooseButtonLabel}}</span>
-            </span>
-            <FileUploadButton :label="uploadButtonLabel" :icon="uploadIcon" @click="upload" :disabled="uploadDisabled" v-if="showUploadButton" />
-            <FileUploadButton :label="cancelButtonLabel" :icon="cancelIcon" @click="clear" :disabled="cancelDisabled" v-if="showCancelButton" />
+            <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">
+                    <span :class="advancedChooseIconClass"></span>
+                    <span class="p-button-label">{{ chooseButtonLabel }}</span>
+                </span>
+                <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" :icon="uploadIcon" @click="upload" :disabled="uploadDisabled" />
+                <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" :icon="cancelIcon" @click="clear" :disabled="cancelDisabled" />
+            </slot>
         </div>
         <div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
-            <FileUploadProgressBar :value="progress" v-if="hasFiles" />
-            <FileUploadMessage v-for="msg of messages" severity="error" :key="msg" @close="onMessageClose">{{msg}}</FileUploadMessage>
-            <div class="p-fileupload-files" v-if="hasFiles">
-                <div class="p-fileupload-row" v-for="(file, index) of files" :key="file.name + file.type + file.size">
-                    <div>
-                        <img v-if="isImage(file)" role="presentation" :alt="file.name" :src="file.objectURL" :width="previewWidth" />
-                    </div>
-                    <div class="p-fileupload-filename">{{file.name}}</div>
-                    <div>{{formatSize(file.size)}}</div>
-                    <div>
-                        <FileUploadButton type="button" icon="pi pi-times" @click="remove(index)" />
-                    </div>
-                </div>
-            </div>
-            <div class="p-fileupload-empty" v-if="$slots.empty && !hasFiles">
+            <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
+                <FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" />
+                <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
+                <FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" />
+                <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" />
+            </slot>
+            <div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" class="p-fileupload-empty">
                 <slot name="empty"></slot>
             </div>
         </div>
     </div>
-    <div class="p-fileupload p-fileupload-basic p-component" v-else-if="isBasic">
-        <FileUploadMessage v-for="msg of messages" severity="error" :key="msg" @close="onMessageClose">{{msg}}</FileUploadMessage>
-        <span :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick"  @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0" >
+    <div v-else-if="isBasic" class="p-fileupload p-fileupload-basic p-component">
+        <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
+        <span v-ripple :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0">
             <span :class="basicChooseButtonIconClass"></span>
-            <span class="p-button-label">{{basicChooseButtonLabel}}</span>
-            <input ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" />
+            <span class="p-button-label">{{ basicChooseButtonLabel }}</span>
+            <input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" />
         </span>
     </div>
 </template>
 
 <script>
 import Button from 'primevue/button';
-import ProgressBar from 'primevue/progressbar';
 import Message from 'primevue/message';
-import {DomHandler} from 'primevue/utils';
+import ProgressBar from 'primevue/progressbar';
 import Ripple from 'primevue/ripple';
+import { DomHandler } from 'primevue/utils';
+import FileContent from './FileContent.vue';
 
 export default {
     name: 'FileUpload',
-    emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear', 'remove'],
+    emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear', 'remove', 'removeUploadedFile'],
     props: {
         name: {
             type: String,
@@ -62,10 +57,10 @@ export default {
             type: String,
             default: 'advanced'
         },
-		multiple: {
-			type: Boolean,
-			default: false
-		},
+        multiple: {
+            type: Boolean,
+            default: false
+        },
         accept: {
             type: String,
             default: null
@@ -152,31 +147,35 @@ export default {
             files: [],
             messages: [],
             focused: false,
-            progress: null
-        }
+            progress: null,
+            uploadedFiles: []
+        };
     },
     methods: {
         onFileSelect(event) {
             if (event.type !== 'drop' && this.isIE11() && this.duplicateIEEvent) {
                 this.duplicateIEEvent = false;
+
                 return;
             }
 
             this.messages = [];
             this.files = this.files || [];
             let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+
             for (let file of files) {
                 if (!this.isFileSelected(file)) {
                     if (this.validate(file)) {
                         if (this.isImage(file)) {
                             file.objectURL = window.URL.createObjectURL(file);
                         }
+
                         this.files.push(file);
                     }
                 }
             }
 
-            this.$emit('select', {originalEvent: event, files: this.files});
+            this.$emit('select', { originalEvent: event, files: this.files });
 
             if (this.fileLimit) {
                 this.checkFileLimit();
@@ -188,8 +187,7 @@ export default {
 
             if (event.type !== 'drop' && this.isIE11()) {
                 this.clearIEInput();
-            }
-            else {
+            } else {
                 this.clearInputElement();
             }
         },
@@ -202,16 +200,15 @@ export default {
                     this.uploadedFileCount += this.files.length;
                 }
 
-                this.$emit('uploader', {files: this.files});
-                this.clear()
-            }
-            else {
+                this.$emit('uploader', { files: this.files });
+                this.clear();
+            } else {
                 let xhr = new XMLHttpRequest();
                 let formData = new FormData();
 
                 this.$emit('before-upload', {
-                    'xhr': xhr,
-                    'formData': formData
+                    xhr: xhr,
+                    formData: formData
                 });
 
                 for (let file of this.files) {
@@ -242,14 +239,14 @@ export default {
                                 xhr: xhr,
                                 files: this.files
                             });
-                        }
-                        else {
+                        } else {
                             this.$emit('error', {
                                 xhr: xhr,
                                 files: this.files
                             });
                         }
 
+                        this.uploadedFiles.push(...this.files);
                         this.clear();
                     }
                 };
@@ -257,8 +254,8 @@ export default {
                 xhr.open('POST', this.url, true);
 
                 this.$emit('before-send', {
-                    'xhr': xhr,
-                    'formData': formData
+                    xhr: xhr,
+                    formData: formData
                 });
 
                 xhr.withCredentials = this.withCredentials;
@@ -284,8 +281,7 @@ export default {
         isFileSelected(file) {
             if (this.files && this.files.length) {
                 for (let sFile of this.files) {
-                    if ((sFile.name + sFile.type + sFile.size) === (file.name + file.type + file.size))
-                        return true;
+                    if (sFile.name + sFile.type + sFile.size === file.name + file.type + file.size) return true;
                 }
             }
 
@@ -296,22 +292,24 @@ export default {
         },
         validate(file) {
             if (this.accept && !this.isFileTypeValid(file)) {
-                this.messages.push(this.invalidFileTypeMessage.replace('{0}', file.name).replace('{1}', this.accept))
+                this.messages.push(this.invalidFileTypeMessage.replace('{0}', file.name).replace('{1}', this.accept));
+
                 return false;
             }
 
             if (this.maxFileSize && file.size > this.maxFileSize) {
                 this.messages.push(this.invalidFileSizeMessage.replace('{0}', file.name).replace('{1}', this.formatSize(this.maxFileSize)));
+
                 return false;
             }
 
             return true;
         },
         isFileTypeValid(file) {
-            let acceptableTypes = this.accept.split(',').map(type => type.trim());
-            for(let type of acceptableTypes) {
-                let acceptable = this.isWildcard(type) ? this.getTypeClass(file.type) === this.getTypeClass(type)
-                    : file.type == type || this.getFileExtension(file).toLowerCase() === type.toLowerCase();
+            let acceptableTypes = this.accept.split(',').map((type) => type.trim());
+
+            for (let type of acceptableTypes) {
+                let acceptable = this.isWildcard(type) ? this.getTypeClass(file.type) === this.getTypeClass(type) : file.type == type || this.getFileExtension(file).toLowerCase() === type.toLowerCase();
 
                 if (acceptable) {
                     return true;
@@ -323,7 +321,7 @@ export default {
         getTypeClass(fileType) {
             return fileType.substring(0, fileType.indexOf('/'));
         },
-        isWildcard(fileType){
+        isWildcard(fileType) {
             return fileType.indexOf('*') !== -1;
         },
         getFileExtension(file) {
@@ -365,20 +363,28 @@ export default {
             }
         },
         onBasicUploaderClick() {
-            if (this.hasFiles)
-                this.upload();
-            else
-                this.$refs.fileInput.click();
+            if (this.hasFiles) this.upload();
+            else this.$refs.fileInput.click();
         },
         remove(index) {
             this.clearInputElement();
             let removedFile = this.files.splice(index, 1)[0];
+
             this.files = [...this.files];
             this.$emit('remove', {
                 file: removedFile,
                 files: this.files
             });
         },
+        removeUploadedFile(index) {
+            let removedFile = this.uploadedFiles.splice(index, 1)[0];
+
+            this.uploadedFiles = [...this.uploadedFiles];
+            this.$emit('removeUploadedFile', {
+                file: removedFile,
+                files: this.uploadedFiles
+            });
+        },
         clearInputElement() {
             this.$refs.fileInput.value = '';
         },
@@ -392,10 +398,11 @@ export default {
             if (bytes === 0) {
                 return '0 B';
             }
+
             let k = 1000,
-            dm = 3,
-            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-            i = Math.floor(Math.log(bytes) / Math.log(k));
+                dm = 3,
+                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+                i = Math.floor(Math.log(bytes) / Math.log(k));
 
             return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
         },
@@ -408,7 +415,7 @@ export default {
         },
         checkFileLimit() {
             if (this.isFileLimitExceeded()) {
-                this.messages.push(this.invalidFileLimitMessage.replace('{0}', this.fileLimit.toString()))
+                this.messages.push(this.invalidFileLimitMessage.replace('{0}', this.fileLimit.toString()));
             }
         },
         onMessageClose() {
@@ -423,33 +430,41 @@ export default {
             return this.mode === 'basic';
         },
         advancedChooseButtonClass() {
-            return ['p-button p-component p-fileupload-choose', this.class, {
+            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
-            }];
+            return [
+                'p-button p-component p-fileupload-choose',
+                this.class,
+                {
+                    'p-fileupload-choose-selected': this.hasFiles,
+                    'p-disabled': this.disabled,
+                    'p-focus': this.focused
+                }
+            ];
         },
         advancedChooseIconClass() {
             return ['p-button-icon p-button-icon-left pi-fw', this.chooseIcon];
         },
         basicChooseButtonIconClass() {
-            return ['p-button-icon p-button-icon-left',
-                !this.hasFiles || this.auto ? this.uploadIcon : this.chooseIcon
-            ];
+            return ['p-button-icon p-button-icon-left', !this.hasFiles || this.auto ? this.uploadIcon : this.chooseIcon];
         },
         basicChooseButtonLabel() {
-            return this.auto ? this.chooseButtonLabel : (this.hasFiles ? this.files.map(f => f.name).join(', ') : this.chooseButtonLabel);
+            return this.auto ? this.chooseButtonLabel : this.hasFiles ? this.files.map((f) => f.name).join(', ') : this.chooseButtonLabel;
         },
         hasFiles() {
             return this.files && this.files.length > 0;
         },
+        hasUploadedFiles() {
+            return this.uploadedFiles && this.uploadedFiles.length > 0;
+        },
         chooseDisabled() {
             return this.disabled || (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount);
         },
@@ -467,17 +482,24 @@ export default {
         },
         cancelButtonLabel() {
             return this.cancelLabel || this.$primevue.config.locale.cancel;
+        },
+        completedLabel() {
+            return this.$primevue.config.locale.completed;
+        },
+        pendingLabel() {
+            return this.$primevue.config.locale.pending;
         }
     },
     components: {
-        'FileUploadButton': Button,
-        'FileUploadProgressBar': ProgressBar,
-        'FileUploadMessage': Message
+        FileUploadButton: Button,
+        FileUploadProgressBar: ProgressBar,
+        FileUploadMessage: Message,
+        FileContent
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
@@ -485,20 +507,6 @@ export default {
     position: relative;
 }
 
-.p-fileupload-row {
-    display: flex;
-    align-items: center;
-}
-
-.p-fileupload-row > div {
-    flex: 1 1 auto;
-    width: 25%;
-}
-
-.p-fileupload-row > div:last-child {
-    text-align: right;
-}
-
 .p-fileupload-content .p-progressbar {
     width: 100%;
     position: absolute;
@@ -511,19 +519,31 @@ export default {
     overflow: hidden;
 }
 
-.p-button.p-fileupload-choose input[type=file] {
-    display: none;
+.p-fileupload-buttonbar {
+    display: flex;
+    flex-wrap: wrap;
 }
 
-.p-fileupload-choose.p-fileupload-choose-selected input[type=file] {
+.p-fileupload > input[type='file'],
+.p-fileupload-basic input[type='file'] {
     display: none;
 }
 
-.p-fileupload-filename {
-    word-break: break-all;
-}
-
 .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>