CODEWITHSUNDEEP
jqueryvalidation
user1595929
user1595929

Reputation: 1372

jquery validate file size

I'm using jquery validate, and I'd like to limit some file size as input. To do so I added the function:

jQuery.validator.addMethod("maxfilesize", function(value, element, params) {
    var elementsize;
    try{
        elementsize = $("#browse_"+$(element).attr("id"))[0].files[0].size;
    }catch(e){
        var browserInfo = navigator.userAgent.toLowerCase();
        if(browserInfo.indexOf("msie") > -1){
            var fso = new ActiveXObject("Scripting.FileSystemObject");
            elementsize = fso.getFile($("#browse_"+$(element).attr("id"))[0].value).size;
        }else{
            return true;
        }
    }
    var size = params[0], typesize = params[1];
    if( typesize == "Ko" ){
        size *= 1024;
    }else if(typesize == "Mo"){
        size *= 1024 * 1024;
    }else if(typesize == "Go"){
        size *= 1024 * 1024 * 1024;
    }
    return this.optional(element) || elementsize < size;
}, jQuery.format("The max file size of {0}{1} is reached"));

I do check $("#browse_"+$(element).attr("id"))[0].files[0].size; instead of element because my input type="file" is hidden to hav a pretty button using bootstrap. The problem is that it is always undefined!!

When I do:

$("[id^=browse_]").change( function() {
    alert('This file size is: ' + this.files[0].size + "MB");
});

The HTML looks like this:

<form id="workflow_form" class="form-horizontal" role="form" novalidate="novalidate">
<fieldset>
    <label class="col-sm-2 control-label" for="read_1">Read 1 browsefile__sl10Gb</label>
    <div class="col-sm-10">
        <div class="input-group">
            <input id="read_1" class="form-control default" type="text" readonly="readonly" value="" name="read_1">
            <span class="input-group-btn">
                <button id="urlfile_btn_read_1" class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
        <span class="help-block">Which read1 files should be used</span>
    </div>
</fieldset>
</form>
<form style="display:none;" enctype="multipart/form-data" method="post">
    <input id="browse_read_1" class="fileupload" type="file" name="browse_read_1">
</form>

I have some javascript to handle the link between the form with the input and the button and the form with the input file hidden. I did that in order to use the filupload plugin as well ...

What am I doing wrong ? thanks for your reply,

Jerome

Upvotes: 1

Views: 10736

Answers (2)

Moein Fazeli
Moein Fazeli

Reputation: 191

You should use element.files[0].size in your validator:

$.validator.addMethod('filesize', function (value, element, arg) {
        if(element.files[0].size<=arg){
            return true;
        }else{
            return false;
        }
    });

    $("#myform" ).validate({
        rules: {
            file_upload:{
                required:true,
                accept:"application/pdf,image/jpeg,image/png",
                filesize: 200000
            }
        },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();
        }
    });

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 200 kb size limit and it is tested

Upvotes: 0

Related Questions