primevue 3.17.0 → 3.18.1

package/fileupload/FileUpload.vue

@@ -1,30 +1,24 @@
 <template>
     <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 v-ripple :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" 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 v-if="showUploadButton" :label="uploadButtonLabel" :icon="uploadIcon" @click="upload" :disabled="uploadDisabled" />
-            <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" :icon="cancelIcon" @click="clear" :disabled="cancelDisabled" />
+            <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 v-if="hasFiles" :value="progress" />
-            <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
-            <div v-if="hasFiles" class="p-fileupload-files">
-                <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-row">
-                    <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 v-if="$slots.empty && !hasFiles" class="p-fileupload-empty">
+            <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>
@@ -41,14 +35,15 @@
 
 <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,
@@ -152,7 +147,8 @@ export default {
             files: [],
             messages: [],
             focused: false,
-            progress: null
+            progress: null,
+            uploadedFiles: []
         };
     },
     methods: {
@@ -250,6 +246,7 @@ export default {
                             });
                         }
 
+                        this.uploadedFiles.push(...this.files);
                         this.clear();
                     }
                 };
@@ -379,6 +376,15 @@ export default {
                 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 = '';
         },
@@ -456,6 +462,9 @@ export default {
         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);
         },
@@ -473,12 +482,19 @@ 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
+        FileUploadMessage: Message,
+        FileContent
     },
     directives: {
         ripple: Ripple
@@ -491,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;
@@ -517,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>

package/fileupload/fileupload.cjs.js

@@ -1,22 +1,108 @@
 'use strict';
 
 var Button = require('primevue/button');
-var ProgressBar = require('primevue/progressbar');
 var Message = require('primevue/message');
-var utils = require('primevue/utils');
+var ProgressBar = require('primevue/progressbar');
 var Ripple = require('primevue/ripple');
+var utils = require('primevue/utils');
+var Badge = require('primevue/badge');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var ProgressBar__default = /*#__PURE__*/_interopDefaultLegacy(ProgressBar);
 var Message__default = /*#__PURE__*/_interopDefaultLegacy(Message);
+var ProgressBar__default = /*#__PURE__*/_interopDefaultLegacy(ProgressBar);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+var Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge);
+
+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];
+        }
+    },
+    components: {
+        FileUploadButton: Button__default["default"],
+        FileUploadBadge: Badge__default["default"]
+    }
+};
+
+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_FileUploadBadge = vue.resolveComponent("FileUploadBadge");
+  const _component_FileUploadButton = vue.resolveComponent("FileUploadButton");
+
+  return (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.files, (file, index) => {
+    return (vue.openBlock(), vue.createElementBlock("div", {
+      key: file.name + file.type + file.size,
+      class: "p-fileupload-file"
+    }, [
+      vue.createElementVNode("img", {
+        role: "presentation",
+        class: "p-fileupload-file-thumbnail",
+        alt: file.name,
+        src: file.objectURL,
+        width: $props.previewWidth
+      }, null, 8, _hoisted_1$1),
+      vue.createElementVNode("div", _hoisted_2$1, [
+        vue.createElementVNode("div", _hoisted_3$1, vue.toDisplayString(file.name), 1),
+        vue.createElementVNode("span", _hoisted_4$1, vue.toDisplayString($options.formatSize(file.size)), 1),
+        vue.createVNode(_component_FileUploadBadge, {
+          value: $props.badgeValue,
+          class: "p-fileupload-file-badge",
+          severity: $props.badgeSeverity
+        }, null, 8, ["value", "severity"])
+      ]),
+      vue.createElementVNode("div", _hoisted_5$1, [
+        vue.createVNode(_component_FileUploadButton, {
+          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,
@@ -120,7 +206,8 @@ var script = {
             files: [],
             messages: [],
             focused: false,
-            progress: null
+            progress: null,
+            uploadedFiles: []
         };
     },
     methods: {
@@ -218,6 +305,7 @@ var script = {
                             });
                         }
 
+                        this.uploadedFiles.push(...this.files);
                         this.clear();
                     }
                 };
@@ -347,6 +435,15 @@ var script = {
                 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 = '';
         },
@@ -424,6 +521,9 @@ var script = {
         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);
         },
@@ -441,12 +541,19 @@ 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__default["default"],
         FileUploadProgressBar: ProgressBar__default["default"],
-        FileUploadMessage: Message__default["default"]
+        FileUploadMessage: Message__default["default"],
+        FileContent: script$1
     },
     directives: {
         ripple: Ripple__default["default"]
@@ -457,77 +564,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 = vue.resolveComponent("FileUploadButton");
   const _component_FileUploadProgressBar = vue.resolveComponent("FileUploadProgressBar");
   const _component_FileUploadMessage = vue.resolveComponent("FileUploadMessage");
+  const _component_FileContent = vue.resolveComponent("FileContent");
   const _directive_ripple = vue.resolveDirective("ripple");
 
   return ($options.isAdvanced)
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createElementVNode("div", _hoisted_2, [
-          vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
-            class: vue.normalizeClass($options.advancedChooseButtonClass),
-            style: vue.normalizeStyle($props.style),
-            onClick: _cache[1] || (_cache[1] = (...args) => ($options.choose && $options.choose(...args))),
-            onKeydown: _cache[2] || (_cache[2] = vue.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"
-          }, [
-            vue.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),
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass($options.advancedChooseIconClass)
-            }, null, 2),
-            vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.chooseButtonLabel), 1)
-          ], 38)), [
-            [_directive_ripple]
-          ]),
-          ($props.showUploadButton)
-            ? (vue.openBlock(), vue.createBlock(_component_FileUploadButton, {
-                key: 0,
-                label: $options.uploadButtonLabel,
-                icon: $props.uploadIcon,
-                onClick: $options.upload,
-                disabled: $options.uploadDisabled
-              }, null, 8, ["label", "icon", "onClick", "disabled"]))
-            : vue.createCommentVNode("", true),
-          ($props.showCancelButton)
-            ? (vue.openBlock(), vue.createBlock(_component_FileUploadButton, {
-                key: 1,
-                label: $options.cancelButtonLabel,
-                icon: $props.cancelIcon,
-                onClick: $options.clear,
-                disabled: $options.cancelDisabled
-              }, null, 8, ["label", "icon", "onClick", "disabled"]))
-            : vue.createCommentVNode("", true)
+        vue.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),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "header", {
+            files: $data.files,
+            uploadedFiles: $data.uploadedFiles,
+            chooseCallback: $options.choose,
+            uploadCallback: $options.upload,
+            clearCallback: $options.clear
+          }, () => [
+            vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+              class: vue.normalizeClass($options.advancedChooseButtonClass),
+              style: vue.normalizeStyle($props.style),
+              onClick: _cache[1] || (_cache[1] = (...args) => ($options.choose && $options.choose(...args))),
+              onKeydown: _cache[2] || (_cache[2] = vue.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"
+            }, [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass($options.advancedChooseIconClass)
+              }, null, 2),
+              vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.chooseButtonLabel), 1)
+            ], 38)), [
+              [_directive_ripple]
+            ]),
+            ($props.showUploadButton)
+              ? (vue.openBlock(), vue.createBlock(_component_FileUploadButton, {
+                  key: 0,
+                  label: $options.uploadButtonLabel,
+                  icon: $props.uploadIcon,
+                  onClick: $options.upload,
+                  disabled: $options.uploadDisabled
+                }, null, 8, ["label", "icon", "onClick", "disabled"]))
+              : vue.createCommentVNode("", true),
+            ($props.showCancelButton)
+              ? (vue.openBlock(), vue.createBlock(_component_FileUploadButton, {
+                  key: 1,
+                  label: $options.cancelButtonLabel,
+                  icon: $props.cancelIcon,
+                  onClick: $options.clear,
+                  disabled: $options.cancelDisabled
+                }, null, 8, ["label", "icon", "onClick", "disabled"]))
+              : vue.createCommentVNode("", true)
+          ])
         ]),
         vue.createElementVNode("div", {
           ref: "content",
@@ -537,64 +647,59 @@ 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)
-            ? (vue.openBlock(), vue.createBlock(_component_FileUploadProgressBar, {
-                key: 0,
-                value: $data.progress
-              }, null, 8, ["value"]))
-            : vue.createCommentVNode("", true),
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.messages, (msg) => {
-            return (vue.openBlock(), vue.createBlock(_component_FileUploadMessage, {
-              key: msg,
-              severity: "error",
-              onClose: $options.onMessageClose
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode(vue.toDisplayString(msg), 1)
-              ]),
-              _: 2
-            }, 1032, ["onClose"]))
-          }), 128)),
-          ($options.hasFiles)
+          vue.renderSlot(_ctx.$slots, "content", {
+            files: $data.files,
+            uploadedFiles: $data.uploadedFiles,
+            removeUploadedFileCallback: $options.removeUploadedFile,
+            removeFileCallback: $options.remove,
+            progress: $data.progress,
+            messages: $data.messages
+          }, () => [
+            ($options.hasFiles)
+              ? (vue.openBlock(), vue.createBlock(_component_FileUploadProgressBar, {
+                  key: 0,
+                  value: $data.progress,
+                  showValue: false
+                }, null, 8, ["value"]))
+              : vue.createCommentVNode("", true),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.messages, (msg) => {
+              return (vue.openBlock(), vue.createBlock(_component_FileUploadMessage, {
+                key: msg,
+                severity: "error",
+                onClose: $options.onMessageClose
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(msg), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClose"]))
+            }), 128)),
+            ($options.hasFiles)
+              ? (vue.openBlock(), vue.createBlock(_component_FileContent, {
+                  key: 1,
+                  files: $data.files,
+                  onRemove: $options.remove,
+                  badgeValue: $options.pendingLabel,
+                  previewWidth: $props.previewWidth
+                }, null, 8, ["files", "onRemove", "badgeValue", "previewWidth"]))
+              : vue.createCommentVNode("", true),
+            vue.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)
             ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.files, (file, index) => {
-                  return (vue.openBlock(), vue.createElementBlock("div", {
-                    key: file.name + file.type + file.size,
-                    class: "p-fileupload-row"
-                  }, [
-                    vue.createElementVNode("div", null, [
-                      ($options.isImage(file))
-                        ? (vue.openBlock(), vue.createElementBlock("img", {
-                            key: 0,
-                            role: "presentation",
-                            alt: file.name,
-                            src: file.objectURL,
-                            width: $props.previewWidth
-                          }, null, 8, _hoisted_6))
-                        : vue.createCommentVNode("", true)
-                    ]),
-                    vue.createElementVNode("div", _hoisted_7, vue.toDisplayString(file.name), 1),
-                    vue.createElementVNode("div", null, vue.toDisplayString($options.formatSize(file.size)), 1),
-                    vue.createElementVNode("div", null, [
-                      vue.createVNode(_component_FileUploadButton, {
-                        type: "button",
-                        icon: "pi pi-times",
-                        onClick: $event => ($options.remove(index))
-                      }, null, 8, ["onClick"])
-                    ])
-                  ]))
-                }), 128))
-              ]))
-            : vue.createCommentVNode("", true),
-          (_ctx.$slots.empty && !$options.hasFiles)
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
                 vue.renderSlot(_ctx.$slots, "empty")
               ]))
             : vue.createCommentVNode("", true)
         ], 544)
       ]))
     : ($options.isBasic)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.messages, (msg) => {
             return (vue.openBlock(), vue.createBlock(_component_FileUploadMessage, {
               key: msg,
@@ -619,7 +724,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             vue.createElementVNode("span", {
               class: vue.normalizeClass($options.basicChooseButtonIconClass)
             }, null, 2),
-            vue.createElementVNode("span", _hoisted_10, vue.toDisplayString($options.basicChooseButtonLabel), 1),
+            vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($options.basicChooseButtonLabel), 1),
             (!$options.hasFiles)
               ? (vue.openBlock(), vue.createElementBlock("input", {
                   key: 0,
@@ -631,7 +736,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))
               : vue.createCommentVNode("", true)
           ], 38)), [
             [_directive_ripple]
@@ -667,7 +772,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;