Fixed #1291 - FileUpload accepts any type of file

primefaces · May 21, 2021 · b849d14 · b849d14
1 parent f194dc4
commit b849d14
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/src/components/fileupload/FileUpload.d.ts b/src/components/fileupload/FileUpload.d.ts
@@ -10,6 +10,7 @@ declare class FileUpload extends Vue {
     auto?: boolean;
     maxFileSize?: number;
     invalidFileSizeMessage?: string;
+    invalidFileTypeMessage?: string;
     invalidFileLimitMessage?: string;
     fileLimit?: number;
     withCredentials?: boolean;

diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
@@ -84,6 +84,10 @@ export default {
             type: String,
             default: '{0}: Invalid file size, file size should be smaller than {1}.'
         },
+        invalidFileTypeMessage: {
+            type: String,
+            default: '{0}: Invalid file type, allowed file types: {1}.'
+        },
         fileLimit: {
             type: Number,
             default: null
@@ -274,20 +278,48 @@ export default {
             return !!window['MSInputMethodContext'] && !!document['documentMode'];
         },
         validate(file) {
+            if (this.accept && !this.isFileTypeValid(file)) {
+                this.messages.push(this.invalidFileTypeMessage.replace('{0}', file.name).replace('{1}', this.accept))
+                return false;
+            }
+
             if (this.maxFileSize && file.size > this.maxFileSize) {
                 this.messages.push(this.invalidFileSizeMessage.replace('{0}', file.name).replace('{1}', this.formatSize(this.maxFileSize)));
                 return false;
             }
 
             return true;
         },
+        isFileTypeValid(file) {
+            let acceptableTypes = this.accept.split(',').map(type => type.trim());
+            for(let type of acceptableTypes) {
+                let acceptable = this.isWildcard(type) ? this.getTypeClass(file.type) === this.getTypeClass(type)
+                    : file.type == type || this.getFileExtension(file).toLowerCase() === type.toLowerCase();
+                if (acceptable) {
+                    return true;
+                }
+            }
+            return false;
+        },
+        getTypeClass(fileType) {
+            return fileType.substring(0, fileType.indexOf('/'));
+        },
+        isWildcard(fileType){
+            return fileType.indexOf('*') !== -1;
+        },
+        getFileExtension(file) {
+            return '.' + file.name.split('.').pop();
+        },
+        isImage(file) {
+            return /^image\//.test(file.type);
+        },
         onDragEnter(event) {
             if (!this.disabled) {
                 event.stopPropagation();
                 event.preventDefault();
             }
         },
-        onDragOver() {
+        onDragOver(event) {
             if (!this.disabled) {
                 DomHandler.addClass(this.$refs.content, 'p-fileupload-highlight');
                 event.stopPropagation();
@@ -299,7 +331,7 @@ export default {
                 DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
             }
         },
-        onDrop() {
+        onDrop(event) {
             if (!this.disabled) {
                 DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
                 event.stopPropagation();
@@ -327,9 +359,6 @@ export default {
                 this.messages = [];
             }
         },
-        isImage(file) {
-            return /^image\//.test(file.type);
-        },
         clearInputElement() {
             this.$refs.fileInput.value = '';
         },

diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
@@ -147,6 +147,12 @@ myUploader(event) {
                                 <td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td>
                                 <td>Message of the invalid fize size.</td>
                             </tr>
+							<tr>
+								<td>invalidFileTypeMessage</td>
+								<td>string</td>
+								<td>"&#123;0&#125;: Invalid file type, allowed file types: "&#123;1&#125;.</td>
+								<td>Message of the invalid file type.</td>
+							</tr>
                             <tr>
                                 <td>invalidFileLimitMessage</td>
                                 <td>string</td>