Restricting file types in JQuery File upload demo

Question

I am using JQuery file upload demo for my next project with Codeigniter. Can anyone tell me how do I achieve the following :

Restricting upload file types to .zip and .rar
Restricting file size
Clearing the list of Uploaded files (JQuery file upload plugin displays the list of already uploaded files)

Help appreciated !!

Make sure you also do all of these restrictions/validations on the server-side. — Kevin B, Sep 06 '12 at 15:47

Dav.id · Answer 1 · 2013-01-21T12:03:16.930

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

EDIT I 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.

Finally! I've been looking a lot for an example that worked. Thx :) — william, Mar 25 '13 at 13:00
`add` is run per file. Therefore `data.submit` is only referring to one file. — Hengjie, May 06 '13 at 10:44
Great, I just added alert("You must select an image file only") before common.notifyError('You must select an image file only') to notify the user — Alaa Sadik, Feb 28 '18 at 07:40

score 7 · Answer 2 · answered Nov 02 '12 at 06:36

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.

score 3 · Answer 3 · answered Sep 06 '12 at 15:45

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

score 3 · Answer 4 · answered Aug 16 '18 at 08:54

One other way to do is as follows.

 $('#upload').fileupload({ 
       change: function (e, data) { 
                if (!(/\.(jpg|jpeg|png|pdf)$/i).test(data.files[0].name)) {
                    alert('Not Allowed');
                    return false;
                }
        } 
 });

score -2 · Answer 5 · answered Sep 06 '12 at 15:45

try looking at this line :

 process: [
            /*
                {
                    action: 'load',
                    fileTypes: /^image\/(gif|jpeg|png)$/,
                    maxFileSize: 20000000 // 20MB
                },
                {
                    action: 'resize',
                    maxWidth: 1920,
                    maxHeight: 1200,
                    minWidth: 800,
                    minHeight: 600
                },

in jquery.fileupload-fp.js

Restricting file types in JQuery File upload demo

5 Answers5