Refactor #3832 Refactor #3833 - For FileUpload

api-generator/components/fileupload.js

@@ -291,6 +291,10 @@ const FileUploadSlots = [
     {
         name: 'cancelicon',
         description: 'Custom cancel icon template.'
+    },
+    {
+        name: 'fileremoveicon',
+        description: 'Custom remove icon template for each file.'
     }
 ];
 

components/lib/fileupload/FileContent.vue

@@ -7,7 +7,12 @@
             <FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" />
         </div>
         <div class="p-fileupload-file-actions">
-            <FileUploadButton icon="pi pi-times" @click="$emit('remove', index)" class="p-fileupload-file-remove p-button-text p-button-danger p-button-rounded"></FileUploadButton>
+            <FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove">
+                <template #icon="iconProps">
+                    <component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
+                    <component v-else :is="'TimesIcon'" :class="iconProps.class" aria-hidden="true" />
+                </template>
+            </FileUploadButton>
         </div>
     </div>
 </template>
@@ -15,6 +20,7 @@
 <script>
 import Badge from 'primevue/badge';
 import Button from 'primevue/button';
+import TimesIcon from 'primevue/icon/times';
 
 export default {
     emits: ['remove'],
@@ -34,6 +40,10 @@ export default {
         previewWidth: {
             type: Number,
             default: 50
+        },
+        templates: {
+            type: null,
+            default: null
         }
     },
     methods: {
@@ -52,7 +62,8 @@ export default {
     },
     components: {
         FileUploadButton: Button,
-        FileUploadBadge: Badge
+        FileUploadBadge: Badge,
+        TimesIcon
     }
 };
 </script>

components/lib/fileupload/FileUpload.d.ts

@@ -330,6 +330,19 @@ export interface FileUploadSlots {
      * Custom cancel icon template.
      */
     cancelicon(): VNode[];
+    /**
+     * Custom remove icon template for each file.
+     */
+    fileremoveicon(scope: {
+        /**
+         * File to upload.
+         */
+        file: File;
+        /**
+         * The index of file
+         */
+        index: number;
+    }): VNode[];
 }
 
 export interface FileUploadEmits {

components/lib/fileupload/FileUpload.vue

@@ -29,8 +29,8 @@
             <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 v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" />
-                <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" />
+                <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" />
             </slot>
             <div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" class="p-fileupload-empty">
                 <slot name="empty"></slot>