From 39f9b55be34c3652ff1771c0dba57a7b3a5a5244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 4 Aug 2021 17:26:21 +0300
Subject: [PATCH] Fixed #1407 - style and class props for FileUpload

---
 api-generator/components/fileupload.js    | 12 ++++++++++++
 src/components/fileupload/FileUpload.d.ts |  2 ++
 src/components/fileupload/FileUpload.vue  |  9 +++++++--
 src/views/fileupload/FileUploadDoc.vue    | 12 ++++++++++++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/fileupload.js b/api-generator/components/fileupload.js
index 9c20d969b..33ec8e724 100644
--- 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
index d05fa50db..1fb1e8c87 100755
--- 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
index d4b6069f7..4063bec18 100755
--- 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
index 5d4ec261e..3aaa2f7cc 100755
--- 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>