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').validate({
    rules: {
        FirstName: {
            required: true,
            maxlength: 20
        },
        image: {
            required: true,
            extension: "jep | jpeg",
            filesize : 50000,
        }
    }
});

I want code similar to the above.

score 45 · Answer 1 · answered Oct 13 '15 at 07:38

You need to write a custom rule to validate file size, also the file extensions has to be passed as a comma separated string

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

jQuery(function ($) {
    "use strict";
    $('#update_profile').validate({
        rules: {
            FirstName: {
                required: true,
                maxlength: 20
            },
            image: {
                required: true,
                extension: "jpg,jpeg",
                filesize: 5,
            }
        },
    });
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>

<form id="update_profile" method="post" action="">
  <input type="file" name="image" />
  <input type="submit" value="Save" />
</form>

@ArunPJohny, What does the "this.optional(element)" part do? — Greg, Aug 11 '16 at 18:56
@Greg if the value is not required and is empty then it will return true — Arun P Johny, Aug 12 '16 at 02:11
The pipe "|" is a valid separator according to the documentation, but there just can't be any spaces: https://jqueryvalidation.org/extension-method/ — AuRise, Jul 06 '17 at 18:15
Arun can we add min and max size and if we remove required field then its not working.any idea — VISHAL SINGH, Jul 26 '17 at 06:54

score 8 · Answer 2 · answered Aug 05 '20 at 01:37

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

score 2 · Answer 3 · answered Jan 29 '18 at 12:48

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

jQuery(function ($) {
    "use strict";
    $('#update_profile').validate({
        rules: {
            FirstName: {
                required: true,
                maxlength: 20
            },
            image: {
                required: true,
                extension: "jpg,jpeg",
                filesize: 5,
            }
        },
    });
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>

<form id="update_profile" method="post" action="">
  <input type="file" name="image" />
  <input type="submit" value="Save" />
</form>

Hi @AlaaMoneam, It's not working perfectly. I added an image which is less than 100kb then I got an error "File size must be less than 5". after that I added image more than 5 MB than also I got an error "File size must be less than 5". Even I tried 1 mb image but still same issue. — user9437856, Jan 31 '19 at 05:32

score 1 · Answer 4 · answered Jul 18 '17 at 10:03

$.validator.addMethod('filesize', function (value, element, arg) {
            var minsize=1000; // min 1kb
            if((value>minsize)&&(value<=arg)){
                return true;
            }else{
                return false;
            }
        });

        $("#myform" ).validate({
            rules: {
                file_upload:{
                    required:true,
                    accept:"application/pdf,image/jpeg,image/png",
                    filesize: 200000   //max size 200 kb
                }
            },messages: {
                file_upload:{
                    filesize:" file size must be less than 200 KB.",
                    accept:"Please upload .jpg or .png or .pdf file of notice.",
                    required:"Please upload file."
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

Min 1 kb to max 200 kb file size and it is tested

value will return file name and not file size – Shiva Saurabh Sep 17 '20 at 08:08 — Shiva Saurabh, Sep 17 '20 at 08:08

score 1 · Answer 5 · answered May 07 '19 at 08:03

If you're using additional-methods.js, you can do it like this:

$('#update_profile').validate({
    rules: {
        FirstName: {
            required: true,
            maxlength: 20
        },
        image: {
            required: true,
            extension: "jep | jpeg",
            maxsize: 50000,
        }
    }
});

Ravindra Bohra · Answer 6 · 2018-01-01T11:50:48.373

 HTML


                <div class="col-sm-9 col-lg-6 col-xs-12 col-md-9">
                    <div class="input-group">
                        <input type="text" class="form-control"  name="uploadFile"  readonly id="uploadFile">
                        <span class="input-group-btn">
                            <span class="btn btn-primary btn-file">
                                Browse&hellip;  <input type="file" id="uploadFile" name="uploadFile" >         
                            </span>
                        </span>
                    </div>
                    <div id="spanUploadFile">

//Message will display here
                    </div>

                </div>


JQuery



 $(document).on('change', '.btn-file :file', function() {

        var input = $(this),numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        var msg = "spanUploadFile";
        input.trigger('fileselect', [numFiles, label]);
        genrateFileMsg(this.id, msg)
genrateSizeMsg(this.files[0], msg)


    });

 function genrateFileMsg(id, nId)
    {

        var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
        var fileExtensionDOB = ['pdf'];
        //var fileExtensionDOB = ['pdf', 'doc', 'docx', 'txt', ];

            if ($.inArray($("#" + id).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                $("#" + nId).html("Only files of type jpg, png, gif, jpeg is allowed");

                return false;
            }







        return true
    }
    function genrateSizeMsg(f, nId)
    {

        var f = f.size;


            f = f / 1024;

            if (f > 100)
            {
                $("#" + nId).html("The file you are trying to upload is too large (max 100KB)");
                return false;
            }



        return true;
    }

the logic defined in genrateFileMsg method as well as genrateSizeMsg method in above jquery code. — Ravindra Bohra, Jan 01 '18 at 12:20

score -1 · Answer 7 · edited Sep 30 '19 at 12:45

<!-- Size in kb -->
   $.validator.addMethod('filesize', function (value, element,param) {
   
  var size=element.files[0].size;
 
  size=size/1024;
  size=Math.round(size);
  return this.optional(element) || size <=param ;
  
}, 'File size must be less than {0}');

jQuery(function ($) {
    "use strict";
    $('#update_profile').validate({
        rules: {
            FirstName: {
                required: true,
                maxlength: 20
            },
            image: {
                required: true,
                extension: "jpg,jpeg",
                filesize: 1000
            }
        },
    });
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>

<form id="update_profile" method="post" action="">
  <input type="file" name="image" />
  <input type="submit" value="Save" />
</form>

Max size 1000kb

Validate file extension and size before submitting form

7 Answers7

Linked