Fixed #1252 Fixed #878 FileUpload

src/components/fileupload/FileUpload.d.ts

@@ -9,6 +9,7 @@ interface FileUploadProps {
     maxFileSize?: number;
     invalidFileSizeMessage?: string;
     invalidFileLimitMessage?: string;
+    invalidFileTypeMessage?: string;
     fileLimit?: number;
     withCredentials?: boolean;
     previewWidth?: number;

src/components/fileupload/FileUpload.vue

@@ -86,6 +86,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
@@ -276,6 +280,11 @@ 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;
@@ -283,13 +292,38 @@ export default {
 
             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();
@@ -301,7 +335,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();
@@ -326,9 +360,6 @@ export default {
             this.files.splice(index, 1);
             this.files = [...this.files];
         },
-        isImage(file) {
-            return /^image\//.test(file.type);
-        },
         clearInputElement() {
             this.$refs.fileInput.value = '';
         },
@@ -399,7 +430,7 @@ export default {
             return this.disabled || (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount);
         },
         uploadDisabled() {
-            return this.disabled || !this.hasFiles;
+            return this.disabled || !this.hasFiles || (this.fileLimit < this.files.length);
         },
         cancelDisabled() {
             return this.disabled || !this.hasFiles;