Merge pull request #2467 from tugcekucukoglu/file-icons

Fixed #2401 - FileUpload | Customizable Icons

api-generator/components/fileupload.js

@@ -113,6 +113,24 @@ const FileUploadProps = [
         default: "true",
         description: "Whether to cancel the upload button."
     },
+    {
+        name: "chooseIcon",
+        type: "string",
+        default: "pi pi-plus",
+        description: "Icon of the choose button."
+    },
+    {
+        name: "uploadIcon",
+        type: "string",
+        default: "pi pi-upload",
+        description: "Icon of the upload button."
+    },
+    {
+        name: "cancelIcon",
+        type: "string",
+        default: "pi pi-times",
+        description: "Icon of the cancel button."
+    },
     {
         name: "style",
         type: "any",

src/components/fileupload/FileUpload.d.ts

@@ -178,6 +178,18 @@ export interface FileUploadProps {
      * Default value is true.
      */
     showCancelButton?: boolean | undefined;
+    /**
+     * Icon of the choose button.
+     */
+    chooseIcon?: string | undefined;
+    /**
+     * Icon of the upload button.
+     */
+    uploadIcon?: string | undefined;
+    /**
+     * Icon of the cancel button.
+     */
+    cancelIcon?: string | undefined;
     /**
      * Inline style of the component.
      */

src/components/fileupload/FileUpload.vue

@@ -3,11 +3,11 @@
         <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="p-button-icon p-button-icon-left pi pi-fw pi-plus"></span>
+                <span :class="advancedChooseIconClass"></span>
                 <span class="p-button-label">{{chooseButtonLabel}}</span>
             </span>
-            <FileUploadButton :label="uploadButtonLabel" icon="pi pi-upload" @click="upload" :disabled="uploadDisabled" v-if="showUploadButton" />
+            <FileUploadButton :label="uploadButtonLabel" :icon="uploadIcon" @click="upload" :disabled="uploadDisabled" v-if="showUploadButton" />
-            <FileUploadButton :label="cancelButtonLabel" icon="pi pi-times" @click="clear" :disabled="cancelDisabled" v-if="showCancelButton" />
+            <FileUploadButton :label="cancelButtonLabel" :icon="cancelIcon" @click="clear" :disabled="cancelDisabled" v-if="showCancelButton" />
         </div>
         <div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
             <FileUploadProgressBar :value="progress" v-if="hasFiles" />
@@ -130,6 +130,18 @@ export default {
             type: Boolean,
             default: true
         },
+        chooseIcon: {
+            type: String,
+            default: 'pi pi-plus'
+        },
+        uploadIcon: {
+            type: String,
+            default: 'pi pi-upload'
+        },
+        cancelIcon: {
+            type: String,
+            default: 'pi pi-times'
+        },
         style: null,
         class: null
     },
@@ -424,11 +436,13 @@ export default {
                 '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 pi', {
+            return ['p-button-icon p-button-icon-left',
-                'pi-plus': !this.hasFiles || this.auto,
+                !this.hasFiles || this.auto ? this.uploadIcon : this.chooseIcon
-                'pi-upload': this.hasFiles && !this.auto
+            ];
-            }];
         },
         basicChooseButtonLabel() {
             return this.auto ? this.chooseButtonLabel : (this.hasFiles ? this.files.map(f => f.name).join(', ') : this.chooseButtonLabel);

src/views/fileupload/FileUploadDoc.vue

@@ -222,6 +222,24 @@ myUploader(event) {
 						<td>true</td>
 						<td>Whether to show the cancel button.</td>
 					</tr>
+					<tr>
+						<td>chooseIcon</td>
+						<td>string</td>
+						<td>pi pi-plus</td>
+						<td>Icon of the choose button.</td>
+					</tr>
+					<tr>
+						<td>uploadIcon</td>
+						<td>string</td>
+						<td>pi pi-upload</td>
+						<td>Icon of the upload button.</td>
+					</tr>
+					<tr>
+						<td>cancelIcon</td>
+						<td>string</td>
+						<td>pi pi-times</td>
+						<td>Icon of the cancel button.</td>
+					</tr>
 					<tr>
 						<td>style</td>
 						<td>any</td>