CODEWITHSUNDEEP
jquerycodeigniterfile-uploadblueimp
Faisal Memon
Faisal Memon

Reputation: 774

Restricting file types in JQuery File upload demo

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

Help appreciated !!

Upvotes: 22

Views: 50660

Answers (5)

Shanaka Rathnayaka
Shanaka Rathnayaka

Reputation: 2682

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

Upvotes: 3

Dav.id
Dav.id

Reputation: 2807

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.

Upvotes: 70

Potheek
Potheek

Reputation: 1021

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.

Upvotes: 7

Alfred
Alfred

Reputation: 21396

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

Upvotes: 3

Satya
Satya

Reputation: 8881

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

Upvotes: -2

Related Questions