Restricting file types in JQuery File upload demo
you probably have a plethora of solutions now, however I wanted to use the BASIC plugin for the jquery uploader, i.e. without any other scripts.. for some reason the maxFileSize/fileTypes options were not working - however that is mostly no doubt to my lack of reading the documentation!
Anyway for me, it was as quick as doing the following:
add: function (e, data) { var goUpload = true; var uploadFile = data.files[0]; if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) { common.notifyError('You must select an image file only'); goUpload = false; } if (uploadFile.size > 2000000) { // 2mb common.notifyError('Please upload a smaller image, max size is 2 MB'); goUpload = false; } if (goUpload == true) { data.submit(); } },
So just using the ADD option to only allow the image types in the regex, and checking (in my case) the file size is a max of 2mb.
Rather basic, and again I am sure the maxFileSize options work, just I am only including the basic plugin script jquery.fileupload.js
EDITI should have added in my case I am uploading just one file (a profile image) so hence the data.files[0].. you could iterate through the files collection of course.
In jquery.fileupload-ui.js edit this part:
$.widget('blueimp.fileupload', $.blueimp.fileupload, { options: { // The maximum allowed file size: maxFileSize: 100000000, // The minimum allowed file size: minFileSize: undefined, // The regular expression for allowed file types, matches // against either file type or file name: acceptFileTypes: /(zip)|(rar)$/i, ----------------------------------------------------------------
To clear the list of uploaded files - Remove the $.getJSON call from main.js if you don't need that functionality.
According to the official documentation;
$('#file_upload').fileUploadUIX({ maxFileSize: 5000000, // Maximum File Size in Bytes - 5 MB minFileSize: 100000, // Minimum File Size in Bytes - 100 KB acceptFileTypes: /(zip)|(rar)$/i // Allowed File Types});