diff --git a/src/components/fileupload/FileUpload.d.ts b/src/components/fileupload/FileUpload.d.ts index f64cc960d..c41fc199b 100755 --- a/src/components/fileupload/FileUpload.d.ts +++ b/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; diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue index 5f83b96dc..22d5fced6 100755 --- a/src/components/fileupload/FileUpload.vue +++ b/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;