CODEWITHSUNDEEP
jqueryjquery-validate
Mahesh Jagdale
Mahesh Jagdale

Reputation: 171

Validate file extension and size before submitting form

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.

Upvotes: 17

Views: 88854

Answers (7)

Ravindra Bohra
Ravindra Bohra

Reputation: 11

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

function genrateFileMsg(e, i) {
    return -1 != $.inArray($("#" + e).val().split(".").pop().toLowerCase(), ["jpeg", "jpg", "png", "gif", "bmp"]) || ($("#" + i).html("Only files of type jpg, png, gif, jpeg is allowed"), !1)
}

function genrateSizeMsg(e, i) {
    var e = e.size;
    return !((e /= 1024) > 100) || ($("#" + i).html("The file you are trying to upload is too large (max 100KB)"), !1)
}
$(document).on("change", ".btn-file :file", function() {
    var e = $(this),
        i = e.get(0).files ? e.get(0).files.length : 1,
        l = e.val().replace(/\\/g, "/").replace(/.*\//, ""),
        t = "spanUploadFile";
    e.trigger("fileselect", [i, l]), genrateFileMsg(this.id, t), genrateSizeMsg(this.files[0], t)
});

Upvotes: -1

Alaa Moneam
Alaa Moneam

Reputation: 527

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

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>

Upvotes: 2

Emmanuel de Carvalho Garcia
Emmanuel de Carvalho Garcia

Reputation: 529

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

Upvotes: 8

Mool Singh
Mool Singh

Reputation: 86

<!-- 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

Upvotes: -1

Johannes
Johannes

Reputation: 71

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

Upvotes: 1

Mahesh Lad
Mahesh Lad

Reputation: 2055

$.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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

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>

Upvotes: 45

Related Questions