Fixed #1407 - style and class props for FileUpload

primefaces · Aug 4, 2021 · 39f9b55 · 39f9b55
1 parent 08727a2
commit 39f9b55
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/api-generator/components/fileupload.js b/api-generator/components/fileupload.js
@@ -112,6 +112,18 @@ const FileUploadProps = [
         type: "boolean",
         default: "true",
         description: "Whether to cancel the upload button."
+    },
+    {
+        name: "style",
+        type: "any",
+        default: "null",
+        description: "Inline style of the component."
+    },
+    {
+        name: "class",
+        type: "string",
+        default: "null",
+        description: "Style class of the component."
     }
 ];
 

diff --git a/src/components/fileupload/FileUpload.d.ts b/src/components/fileupload/FileUpload.d.ts
@@ -19,6 +19,8 @@ interface FileUploadProps {
     customUpload?: boolean;
     showUploadButton?: boolean;
     showCancelButton?: boolean;
+    style?: any;
+    class?: string;
 }
 
 declare class FileUpload {

diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-fileupload p-fileupload-advanced p-component" v-if="isAdvanced">
+    <div :class="containerClass" :style="style" v-if="isAdvanced">
         <div class="p-fileupload-buttonbar">
             <span :class="advancedChooseButtonClass" @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" />
@@ -129,7 +129,9 @@ export default {
         showCancelButton: {
             type: Boolean,
             default: true
-        }
+        },
+        style: null,
+        class: null
     },
     duplicateIEEvent: false,
     data() {
@@ -398,6 +400,9 @@ export default {
         }
     },
     computed: {
+        containerClass() {
+            return ['p-fileupload p-fileupload-advanced p-component', this.class];
+        },
         isAdvanced() {
             return this.mode === 'advanced';
         },

diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
@@ -215,6 +215,18 @@ myUploader(event) {
 						<td>true</td>
 						<td>Whether to show the cancel button.</td>
 					</tr>
+					<tr>
+						<td>style</td>
+						<td>any</td>
+						<td>null</td>
+						<td>Inline style of the component.</td>
+					</tr>
+					<tr>
+						<td>class</td>
+						<td>string</td>
+						<td>null</td>
+						<td>Style class of the component.</td>
+					</tr>
 				</tbody>
 			</table>
 		</div>