Restricting file types in JQuery File upload demo Restricting file types in JQuery File upload demo jquery jquery

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});