Fixed #2974 - FileUpload | new content slot

primefaces · Sep 15, 2022 · 3a762a3 · 3a762a3
1 parent 3ec3989
commit 3a762a3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/api-generator/components/fileupload.js b/api-generator/components/fileupload.js
@@ -276,9 +276,13 @@ const FileUploadEvents = [
 ];
 
 const FileUploadSlots = [
+    {
+        name: 'content',
+        description: 'Custom uploaded content template.'
+    },
     {
         name: 'empty',
-        description: 'Custom content when there is no selected file'
+        description: 'Custom content when there is no selected file.'
     }
 ];
 

diff --git a/src/components/fileupload/FileUpload.d.ts b/src/components/fileupload/FileUpload.d.ts
@@ -202,7 +202,11 @@ export interface FileUploadProps {
 
 export interface FileUploadSlots {
     /**
-     * Custom empty template.
+     * Custom uploaded content template.
+     */
+    content: () => VNode[];
+    /**
+     * Custom content when there is no selected file.
      */
     empty: () => VNode[];
 }

diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
@@ -24,6 +24,9 @@
                     </div>
                 </div>
             </div>
+            <div v-if="$slots.content && !hasFiles">
+                <slot name="content"></slot>
+            </div>
             <div v-if="$slots.empty && !hasFiles" class="p-fileupload-empty">
                 <slot name="empty"></slot>
             </div>
@@ -41,10 +44,10 @@
 
 <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';
 
 export default {
     name: 'FileUpload',