Fixed #897 - File Upload cant disable and hide Upload & Cancel

primefaces · Jan 28, 2021 · f825137 · f825137
1 parent cfcd851
commit f825137
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/src/components/fileupload/FileUpload.d.ts b/src/components/fileupload/FileUpload.d.ts
@@ -18,6 +18,8 @@ declare class FileUpload extends Vue {
     uploadLabel?: string;
     cancelLabel?: string;
     customUpload?: boolean;
+    showUploadButton?: boolean;
+    showCancelButton?: boolean,
     $emit(eventName: 'select', e: { originalEvent: Event, files: any }): this;
     $emit(eventName: 'before-upload', e: { xhr: XMLHttpRequest, formData: any }): this;
     $emit(eventName: 'progress', e: { originalEvent: Event, progress: any }): this;

diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
@@ -7,7 +7,8 @@
                 <span class="p-button-label">{{chooseButtonLabel}}</span>
             </span>
             <FileUploadButton :label="uploadButtonLabel" icon="pi pi-upload" @click="upload" :disabled="uploadDisabled" />
-            <FileUploadButton :label="cancelButtonLabel" icon="pi pi-times" @click="clear" :disabled="cancelDisabled" />
+            <FileUploadButton :label="uploadButtonLabel" icon="pi pi-upload" @click="upload" :disabled="uploadDisabled" v-if="showUploadButton" />
+            <FileUploadButton :label="cancelButtonLabel" icon="pi pi-times" @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" />
@@ -115,6 +116,14 @@ export default {
         customUpload: {
             type: Boolean,
             default: false
+        },
+        showUploadButton: {
+            type: Boolean,
+            default: true
+        },
+        showCancelButton: {
+            type: Boolean,
+            default: true
         }
     },
     duplicateIEEvent: false,
@@ -393,6 +402,7 @@ export default {
         },
         uploadDisabled() {
             return this.disabled || !this.hasFiles;
+            // return this.disabled || !this.hasFiles || (this.fileLimit && this.fileLimit < this.files.length);
         },
         cancelDisabled() {
             return this.disabled || !this.hasFiles;

diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
@@ -195,6 +195,18 @@ myUploader(event) {
                                 <td>false</td>
                                 <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback.</td>
                             </tr>
+							<tr>
+								<td>showUploadButton</td>
+								<td>boolean</td>
+								<td>true</td>
+								<td>Whether to show the upload button.</td>
+							</tr>
+							<tr>
+								<td>showCancelButton</td>
+								<td>boolean</td>
+								<td>true</td>
+								<td>Whether to show the cancel button.</td>
+							</tr>
 						</tbody>
 					</table>
 				</div>