primevue 3.16.2 → 3.18.0

package/fileupload/fileupload.esm.js

@@ -1,13 +1,93 @@
 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 { resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, withDirectives, normalizeClass, normalizeStyle, withKeys, toDisplayString, createBlock, createCommentVNode, Fragment, renderList, withCtx, createTextVNode, createVNode, renderSlot } from 'vue';
+import { DomHandler } from 'primevue/utils';
+import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createElementVNode, toDisplayString, createVNode, resolveDirective, renderSlot, withDirectives, normalizeClass, normalizeStyle, withKeys, createBlock, createCommentVNode, withCtx, createTextVNode } from 'vue';
+
+var script$1 = {
+    emits: ['remove'],
+    props: {
+        files: {
+            type: Array,
+            default: () => []
+        },
+        badgeSeverity: {
+            type: String,
+            default: 'warning'
+        },
+        badgeValue: {
+            type: String,
+            default: null
+        },
+        previewWidth: {
+            type: Number,
+            default: 50
+        }
+    },
+    methods: {
+        formatSize(bytes) {
+            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));
+
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+        }
+    }
+};
+
+const _hoisted_1$1 = ["alt", "src", "width"];
+const _hoisted_2$1 = { class: "p-fileupload-file-details" };
+const _hoisted_3$1 = { class: "p-fileupload-file-name" };
+const _hoisted_4$1 = { class: "p-fileupload-file-size" };
+const _hoisted_5$1 = { class: "p-fileupload-file-actions" };
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Badge = resolveComponent("Badge");
+  const _component_Button = resolveComponent("Button");
+
+  return (openBlock(true), createElementBlock(Fragment, null, renderList($props.files, (file, index) => {
+    return (openBlock(), createElementBlock("div", {
+      key: file.name + file.type + file.size,
+      class: "p-fileupload-file"
+    }, [
+      createElementVNode("img", {
+        role: "presentation",
+        class: "p-fileupload-file-thumbnail",
+        alt: file.name,
+        src: file.objectURL,
+        width: $props.previewWidth
+      }, null, 8, _hoisted_1$1),
+      createElementVNode("div", _hoisted_2$1, [
+        createElementVNode("div", _hoisted_3$1, toDisplayString(file.name), 1),
+        createElementVNode("span", _hoisted_4$1, toDisplayString($options.formatSize(file.size)), 1),
+        createVNode(_component_Badge, {
+          value: $props.badgeValue,
+          class: "p-fileupload-file-badge",
+          severity: $props.badgeSeverity
+        }, null, 8, ["value", "severity"])
+      ]),
+      createElementVNode("div", _hoisted_5$1, [
+        createVNode(_component_Button, {
+          icon: "pi pi-times",
+          onClick: $event => (_ctx.$emit('remove', index)),
+          class: "p-fileupload-file-remove p-button-text p-button-danger p-button-rounded"
+        }, null, 8, ["onClick"])
+      ])
+    ]))
+  }), 128))
+}
+
+script$1.render = render$1;
 
 var script = {
     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,
@@ -21,10 +101,10 @@ var script = {
             type: String,
             default: 'advanced'
         },
-		multiple: {
-			type: Boolean,
-			default: false
-		},
+        multiple: {
+            type: Boolean,
+            default: false
+        },
         accept: {
             type: String,
             default: null
@@ -111,31 +191,35 @@ var script = {
             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();
@@ -147,8 +231,7 @@ var script = {
 
             if (event.type !== 'drop' && this.isIE11()) {
                 this.clearIEInput();
-            }
-            else {
+            } else {
                 this.clearInputElement();
             }
         },
@@ -161,16 +244,15 @@ var script = {
                     this.uploadedFileCount += this.files.length;
                 }
 
-                this.$emit('uploader', {files: this.files});
+                this.$emit('uploader', { files: this.files });
                 this.clear();
-            }
-            else {
+            } 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) {
@@ -201,14 +283,14 @@ var script = {
                                 xhr: xhr,
                                 files: this.files
                             });
-                        }
-                        else {
+                        } else {
                             this.$emit('error', {
                                 xhr: xhr,
                                 files: this.files
                             });
                         }
 
+                        this.uploadedFiles.push(...this.files);
                         this.clear();
                     }
                 };
@@ -216,8 +298,8 @@ var script = {
                 xhr.open('POST', this.url, true);
 
                 this.$emit('before-send', {
-                    'xhr': xhr,
-                    'formData': formData
+                    xhr: xhr,
+                    formData: formData
                 });
 
                 xhr.withCredentials = this.withCredentials;
@@ -243,8 +325,7 @@ var script = {
         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;
                 }
             }
 
@@ -256,21 +337,23 @@ var script = {
         validate(file) {
             if (this.accept && !this.isFileTypeValid(file)) {
                 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;
@@ -282,7 +365,7 @@ var script = {
         getTypeClass(fileType) {
             return fileType.substring(0, fileType.indexOf('/'));
         },
-        isWildcard(fileType){
+        isWildcard(fileType) {
             return fileType.indexOf('*') !== -1;
         },
         getFileExtension(file) {
@@ -324,20 +407,28 @@ var script = {
             }
         },
         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 = '';
         },
@@ -351,10 +442,11 @@ var script = {
             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];
         },
@@ -382,33 +474,41 @@ var script = {
             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);
         },
@@ -426,15 +526,22 @@ var script = {
         },
         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: script$1
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
 };
 
@@ -442,77 +549,80 @@ const _hoisted_1 = {
   key: 0,
   class: "p-fileupload p-fileupload-advanced p-component"
 };
-const _hoisted_2 = { class: "p-fileupload-buttonbar" };
-const _hoisted_3 = ["multiple", "accept", "disabled"];
+const _hoisted_2 = ["multiple", "accept", "disabled"];
+const _hoisted_3 = { class: "p-fileupload-buttonbar" };
 const _hoisted_4 = { class: "p-button-label" };
 const _hoisted_5 = {
-  key: 1,
-  class: "p-fileupload-files"
-};
-const _hoisted_6 = ["alt", "src", "width"];
-const _hoisted_7 = { class: "p-fileupload-filename" };
-const _hoisted_8 = {
-  key: 2,
+  key: 0,
   class: "p-fileupload-empty"
 };
-const _hoisted_9 = {
+const _hoisted_6 = {
   key: 1,
   class: "p-fileupload p-fileupload-basic p-component"
 };
-const _hoisted_10 = { class: "p-button-label" };
-const _hoisted_11 = ["accept", "disabled", "multiple"];
+const _hoisted_7 = { class: "p-button-label" };
+const _hoisted_8 = ["accept", "disabled", "multiple"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_FileUploadButton = resolveComponent("FileUploadButton");
   const _component_FileUploadProgressBar = resolveComponent("FileUploadProgressBar");
   const _component_FileUploadMessage = resolveComponent("FileUploadMessage");
+  const _component_FileContent = resolveComponent("FileContent");
   const _directive_ripple = resolveDirective("ripple");
 
   return ($options.isAdvanced)
     ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          withDirectives((openBlock(), createElementBlock("span", {
-            class: normalizeClass($options.advancedChooseButtonClass),
-            style: normalizeStyle($props.style),
-            onClick: _cache[1] || (_cache[1] = (...args) => ($options.choose && $options.choose(...args))),
-            onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => ($options.choose && $options.choose(...args)), ["enter"])),
-            onFocus: _cache[3] || (_cache[3] = (...args) => ($options.onFocus && $options.onFocus(...args))),
-            onBlur: _cache[4] || (_cache[4] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-            tabindex: "0"
-          }, [
-            createElementVNode("input", {
-              ref: "fileInput",
-              type: "file",
-              onChange: _cache[0] || (_cache[0] = (...args) => ($options.onFileSelect && $options.onFileSelect(...args))),
-              multiple: $props.multiple,
-              accept: $props.accept,
-              disabled: $options.chooseDisabled
-            }, null, 40, _hoisted_3),
-            createElementVNode("span", {
-              class: normalizeClass($options.advancedChooseIconClass)
-            }, null, 2),
-            createElementVNode("span", _hoisted_4, toDisplayString($options.chooseButtonLabel), 1)
-          ], 38)), [
-            [_directive_ripple]
-          ]),
-          ($props.showUploadButton)
-            ? (openBlock(), createBlock(_component_FileUploadButton, {
-                key: 0,
-                label: $options.uploadButtonLabel,
-                icon: $props.uploadIcon,
-                onClick: $options.upload,
-                disabled: $options.uploadDisabled
-              }, null, 8, ["label", "icon", "onClick", "disabled"]))
-            : createCommentVNode("", true),
-          ($props.showCancelButton)
-            ? (openBlock(), createBlock(_component_FileUploadButton, {
-                key: 1,
-                label: $options.cancelButtonLabel,
-                icon: $props.cancelIcon,
-                onClick: $options.clear,
-                disabled: $options.cancelDisabled
-              }, null, 8, ["label", "icon", "onClick", "disabled"]))
-            : createCommentVNode("", true)
+        createElementVNode("input", {
+          ref: "fileInput",
+          type: "file",
+          onChange: _cache[0] || (_cache[0] = (...args) => ($options.onFileSelect && $options.onFileSelect(...args))),
+          multiple: $props.multiple,
+          accept: $props.accept,
+          disabled: $options.chooseDisabled
+        }, null, 40, _hoisted_2),
+        createElementVNode("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "header", {
+            files: $data.files,
+            uploadedFiles: $data.uploadedFiles,
+            chooseCallback: $options.choose,
+            uploadCallback: $options.upload,
+            clearCallback: $options.clear
+          }, () => [
+            withDirectives((openBlock(), createElementBlock("span", {
+              class: normalizeClass($options.advancedChooseButtonClass),
+              style: normalizeStyle($props.style),
+              onClick: _cache[1] || (_cache[1] = (...args) => ($options.choose && $options.choose(...args))),
+              onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => ($options.choose && $options.choose(...args)), ["enter"])),
+              onFocus: _cache[3] || (_cache[3] = (...args) => ($options.onFocus && $options.onFocus(...args))),
+              onBlur: _cache[4] || (_cache[4] = (...args) => ($options.onBlur && $options.onBlur(...args))),
+              tabindex: "0"
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass($options.advancedChooseIconClass)
+              }, null, 2),
+              createElementVNode("span", _hoisted_4, toDisplayString($options.chooseButtonLabel), 1)
+            ], 38)), [
+              [_directive_ripple]
+            ]),
+            ($props.showUploadButton)
+              ? (openBlock(), createBlock(_component_FileUploadButton, {
+                  key: 0,
+                  label: $options.uploadButtonLabel,
+                  icon: $props.uploadIcon,
+                  onClick: $options.upload,
+                  disabled: $options.uploadDisabled
+                }, null, 8, ["label", "icon", "onClick", "disabled"]))
+              : createCommentVNode("", true),
+            ($props.showCancelButton)
+              ? (openBlock(), createBlock(_component_FileUploadButton, {
+                  key: 1,
+                  label: $options.cancelButtonLabel,
+                  icon: $props.cancelIcon,
+                  onClick: $options.clear,
+                  disabled: $options.cancelDisabled
+                }, null, 8, ["label", "icon", "onClick", "disabled"]))
+              : createCommentVNode("", true)
+          ])
         ]),
         createElementVNode("div", {
           ref: "content",
@@ -522,68 +632,63 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onDragleave: _cache[7] || (_cache[7] = (...args) => ($options.onDragLeave && $options.onDragLeave(...args))),
           onDrop: _cache[8] || (_cache[8] = (...args) => ($options.onDrop && $options.onDrop(...args)))
         }, [
-          ($options.hasFiles)
-            ? (openBlock(), createBlock(_component_FileUploadProgressBar, {
-                key: 0,
-                value: $data.progress
-              }, null, 8, ["value"]))
-            : createCommentVNode("", true),
-          (openBlock(true), createElementBlock(Fragment, null, renderList($data.messages, (msg) => {
-            return (openBlock(), createBlock(_component_FileUploadMessage, {
-              severity: "error",
-              key: msg,
-              onClose: $options.onMessageClose
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(msg), 1)
-              ]),
-              _: 2
-            }, 1032, ["onClose"]))
-          }), 128)),
-          ($options.hasFiles)
+          renderSlot(_ctx.$slots, "content", {
+            files: $data.files,
+            uploadedFiles: $data.uploadedFiles,
+            removeUploadedFileCallback: $options.removeUploadedFile,
+            removeFileCallback: $options.remove,
+            progress: $data.progress,
+            messages: $data.messages
+          }, () => [
+            ($options.hasFiles)
+              ? (openBlock(), createBlock(_component_FileUploadProgressBar, {
+                  key: 0,
+                  value: $data.progress,
+                  showValue: false
+                }, null, 8, ["value"]))
+              : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList($data.messages, (msg) => {
+              return (openBlock(), createBlock(_component_FileUploadMessage, {
+                key: msg,
+                severity: "error",
+                onClose: $options.onMessageClose
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(msg), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClose"]))
+            }), 128)),
+            ($options.hasFiles)
+              ? (openBlock(), createBlock(_component_FileContent, {
+                  key: 1,
+                  files: $data.files,
+                  onRemove: $options.remove,
+                  badgeValue: $options.pendingLabel,
+                  previewWidth: $props.previewWidth
+                }, null, 8, ["files", "onRemove", "badgeValue", "previewWidth"]))
+              : createCommentVNode("", true),
+            createVNode(_component_FileContent, {
+              files: $data.uploadedFiles,
+              onRemove: $options.removeUploadedFile,
+              badgeValue: $options.completedLabel,
+              badgeSeverity: "success",
+              previewWidth: $props.previewWidth
+            }, null, 8, ["files", "onRemove", "badgeValue", "previewWidth"])
+          ]),
+          (_ctx.$slots.empty && !$options.hasFiles && !$options.hasUploadedFiles)
             ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList($data.files, (file, index) => {
-                  return (openBlock(), createElementBlock("div", {
-                    class: "p-fileupload-row",
-                    key: file.name + file.type + file.size
-                  }, [
-                    createElementVNode("div", null, [
-                      ($options.isImage(file))
-                        ? (openBlock(), createElementBlock("img", {
-                            key: 0,
-                            role: "presentation",
-                            alt: file.name,
-                            src: file.objectURL,
-                            width: $props.previewWidth
-                          }, null, 8, _hoisted_6))
-                        : createCommentVNode("", true)
-                    ]),
-                    createElementVNode("div", _hoisted_7, toDisplayString(file.name), 1),
-                    createElementVNode("div", null, toDisplayString($options.formatSize(file.size)), 1),
-                    createElementVNode("div", null, [
-                      createVNode(_component_FileUploadButton, {
-                        type: "button",
-                        icon: "pi pi-times",
-                        onClick: $event => ($options.remove(index))
-                      }, null, 8, ["onClick"])
-                    ])
-                  ]))
-                }), 128))
-              ]))
-            : createCommentVNode("", true),
-          (_ctx.$slots.empty && !$options.hasFiles)
-            ? (openBlock(), createElementBlock("div", _hoisted_8, [
                 renderSlot(_ctx.$slots, "empty")
               ]))
             : createCommentVNode("", true)
         ], 544)
       ]))
     : ($options.isBasic)
-      ? (openBlock(), createElementBlock("div", _hoisted_9, [
+      ? (openBlock(), createElementBlock("div", _hoisted_6, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($data.messages, (msg) => {
             return (openBlock(), createBlock(_component_FileUploadMessage, {
-              severity: "error",
               key: msg,
+              severity: "error",
               onClose: $options.onMessageClose
             }, {
               default: withCtx(() => [
@@ -604,7 +709,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("span", {
               class: normalizeClass($options.basicChooseButtonIconClass)
             }, null, 2),
-            createElementVNode("span", _hoisted_10, toDisplayString($options.basicChooseButtonLabel), 1),
+            createElementVNode("span", _hoisted_7, toDisplayString($options.basicChooseButtonLabel), 1),
             (!$options.hasFiles)
               ? (openBlock(), createElementBlock("input", {
                   key: 0,
@@ -616,7 +721,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   onChange: _cache[9] || (_cache[9] = (...args) => ($options.onFileSelect && $options.onFileSelect(...args))),
                   onFocus: _cache[10] || (_cache[10] = (...args) => ($options.onFocus && $options.onFocus(...args))),
                   onBlur: _cache[11] || (_cache[11] = (...args) => ($options.onBlur && $options.onBlur(...args)))
-                }, null, 40, _hoisted_11))
+                }, null, 40, _hoisted_8))
               : createCommentVNode("", true)
           ], 38)), [
             [_directive_ripple]
@@ -652,7 +757,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-fileupload-content {\n    position: relative;\n}\n.p-fileupload-row {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-fileupload-row > div {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 25%;\n}\n.p-fileupload-row > div:last-child {\n    text-align: right;\n}\n.p-fileupload-content .p-progressbar {\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-button.p-fileupload-choose {\n    position: relative;\n    overflow: hidden;\n}\n.p-button.p-fileupload-choose input[type=file] {\n    display: none;\n}\n.p-fileupload-choose.p-fileupload-choose-selected input[type=file] {\n    display: none;\n}\n.p-fileupload-filename {\n    word-break: break-all;\n}\n.p-fluid .p-fileupload .p-button {\n    width: auto;\n}\n";
+var css_248z = "\n.p-fileupload-content {\n    position: relative;\n}\n.p-fileupload-content .p-progressbar {\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-button.p-fileupload-choose {\n    position: relative;\n    overflow: hidden;\n}\n.p-fileupload-buttonbar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-fileupload > input[type='file'],\n.p-fileupload-basic input[type='file'] {\n    display: none;\n}\n.p-fluid .p-fileupload .p-button {\n    width: auto;\n}\n.p-fileupload-file {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-fileupload-file-thumbnail {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-fileupload-file-actions {\n    margin-left: auto;\n}\n";
 styleInject(css_248z);
 
 script.render = render;