How to Have Jquery Restrict File Types on Upload

How to have jQuery restrict file types on upload?

You can get the value of a file field just the same as any other field. You can't alter it, however.

So to superficially check if a file has the right extension, you could do something like this:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

Restrict upload to file extensions in jQuery Validation

You never explained the problem you're having with your code:

$("#contact-form").validate({ 
    onfocusout: function(e) {
        this.element(e);
    },
    rules:{
        resume:{
            required:true,
            extension: "docx|rtf|doc|pdf"
        }
    },
    resume:{
        required:"input type is required",                  
        extension:"select valied input file format"
    }
});

However, you're declaring messages without using the messages option. This is an error that would likely break the plugin, or at the least, your custom error messages would be ignored.

Your code should look like this...

$("#contact-form").validate({ 
    onfocusout: function(e) {  // this option is not needed
        this.element(e);       // this is the default behavior
    },
    rules:{
        resume:{
            required:true,
            extension: "docx|rtf|doc|pdf"
        }
    },
    messages: {  // <-- you must declare messages inside of "messages" option
        resume:{
            required:"input type is required",                  
            extension:"select valid input file format"
        }
    }
});

Working DEMO: http://jsfiddle.net/ZqxR2/

Restrict file types in BlueImp JQuery File Upload

You may need to alter the code a little more but I was able to get what you wanted by altering the regex to the following:

 $('#file_upload').fileUploadUIX({
        maxFileSize: 5000000, // Maximum File Size in Bytes - 5 MB
        minFileSize: 100000, // Minimum File Size in Bytes - 100 KB
        acceptFileTypes: /(\.|\/)(?!exe|js)$/i  // Allowed File Types
    });

How to have jQuery filtered file types on selecting files before uploading?

Use the accept attribute to filter the file types. Refer my sample code below.

<!--Code to access only for excel files--><input type="file" accept=".xls,.xlsx" />

jquery - Check for file extension before uploading

I would like to thank the person who posted the answer, but he has deleted the post. We can do it like this.

$("#yourElem").uploadify({
   'uploader': ...,
   'script': ...
    'fileExt' : '*.jpg;*.gif;', //add allowed extensions
    .....,
    'onSelect': function(e, q, f) {
        var validExtensions = ['jpg','gif']; //array of valid extensions
        var fileName = f.name;
        var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
        if ($.inArray(fileNameExt, validExtensions) == -1){
           alert("Invalid file type");
           $("#yourElem").uploadifyCancel(q);
           return false;
        }
    }
});

Thanks for the answer, it really worked...

Limit file format when using input type=file?

Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension using front-end validation (HTML/JavaScript).

But still, the accept attribute of <input type = "file"> can help to provide a filter in the file select dialog box provided by the user's browser/OS. For example,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> 
<input type="file" accept=".xls,.xlsx" />

Restrict the file type and total size of files uploded using drag and drop option of jquery fileupload plugin

First of all, not all browsers support files size restriction - some only support names and not any additional data.

Now, to the question at hand - use the callbacks the plugin provides.

$('#fileupload').fileupload('option', {
        add: function (e, result) { 
            // Here you can access properties like:
            // var type = result.files[0].type;
            // var size = result.files[0].size;
            // and so on........            
        }
});

You should check the callbacks API

restrict file upload selection to specific types

There is an html attribute for this specific purpose called accept but it has little support across browsers. Because of this server side validation is recommended instead.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

If you don't have access to the backend have a look at a flash based solution like SWFUpload.

See more on this here: File input 'accept' attribute - is it useful?

---

Related Topics