Validate file extension and size before submitting form

Question

I am using jQuery validate plugin, and want to validate file extension and file size before submitting a form.

\"use strict\";
$(\'#update_profile\').validat         


        

Answer 1

Be aware that element.files[0].size works with byte unit. So if you want to work with MB, you need to convert it to bytes. In this example:

$.validator.addMethod('filesize', function (value, element, param) {
    return this.optional(element) || (element.files[0].size <= param * 1000000)
}, 'File size must be less than {0} MB');

You need to pass into your validate:

$('#update_profile').validate({
    rules: {
        FirstName: {
            required: true,
            maxlength: 20
        },
        image: {
            required: true,
            extension: "jep | jpeg",
            filesize : 5, // here we are working with MB
        }
    }
});