How to validate form controls data size not more than 2.5 mb?

Question

I have form which has controls like first name, last name, etc and also file upload attachment. I need to calculated all the data should reach more than 2.5 mb.

How can we do that with jQuery and show validation error on that page?

<form action="/ContactSubmission" class="form-horizontal" enctype="multipart/form-data" method="post" role="form" novalidate="novalidate">                  
     <div class="col-sm-7">
          <input class="form-control input-validation-error" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" placeholder="First Name" required="required" type="text" value="">
          <span class="field-validation-error" data-valmsg-for="FirstName" data-valmsg-replace="true" style="color:Red"><span for="FirstName" class="">The First Name field is required.</span>
     </div>
     <div class="col-sm-7">
          <input class="form-control" data-val="true" data-val-required="The Last Name field is required." id="LastName" name="LastName" placeholder="Last Name" type="text" value="">
          <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true" style="color:Red"></span>
     </div>
     <div class="col-sm-7">
          <input class="form-control" data-val="true" data-val-required="The Email Address field is required." id="EmailAddress" name="EmailAddress" placeholder="Email Address" type="text" value="">
          <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true" style="color:Red"></span>
      </div>
      <div class="col-sm-7">
           <input class="form-control" id="Attachement" name="Attachement" type="file" value="">
       </div>
       <div class="form-group">
            <div class="col-sm-4 col-md-offset-5">
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="button" class="btn btn-default" id="cancel">Cancel</button>
             </div>
       </div>

Wait a second, your data has to be at least 2.5MB or max 2.5MB? — RononDex, Dec 13 '13 at 14:59
Check this answer, maybe it's the same problem: http://stackoverflow.com/a/11799218/2547435 — , Dec 13 '13 at 15:00
Considering that the whole form, apart from the file, won't consume more than a few KB, you can just check on the attachment size. Why bother checking the rest? — emerson.marini, Dec 13 '13 at 15:02
Even in this case. What kind of text length would be considerable to be taken into account? I still think you're overworking on this. — emerson.marini, Dec 13 '13 at 15:13

Aurélien Gasser · Answer 1 · 2013-12-13T15:48:06.863

2

With modern browsers (browsers which support HTML5), you can check the size property of the files in the <input type="file"> element.

var input = $('input[type="file"]')[0];
var fileSize = input.files[0].size // file size in bytes

On older browsers (browsers which do not support HTML5), you cannot achieve this using jQuery because jQuery (javascript) doesn't have access to the size of files that you submit through a <input type="file">. You have two alternate options:

Use a flash uploader (swfupload for example). Flash does have access to the size of files, contrary to javascript.
Let the user upload the file even if it's too big (using your existing form), check the file size on the backend, and then show him in response a message stating that the file has been discarded because it's too big.

The first solution (flash) has the advantage of not letting the user wait until the upload of the oversized file is complete. Since it has access to file sizes, you can display an error before the upload has even started.

edited Dec 13 '13 at 15:48

answered Dec 13 '13 at 15:06

Aurélien Gasser

3,043
1
20
25

Modern browsers can get the file size: http://stackoverflow.com/a/4307882 (See also: http://www.html5rocks.com/en/tutorials/file/dndfiles/) – gen_Eric Dec 13 '13 at 15:14
flash is not supported on iPad and many types of smartphones (it simply consumes to much power) – davidkonrad Dec 13 '13 at 15:38
It is true that Flash isn't supported on the iPad, iPhone or most mobile devices, but in the case of an iPad/iPhone, unless you are uploading a picture you can't access the file system anyway... :) – Josh Taylor Dec 13 '13 at 15:53
From "you cannot do that, you have to do flash" to the solution from me, polluted with jQuery... :-( But glad to help. – davidkonrad Dec 13 '13 at 20:09
Starting with it cant be done to you know something completely new. That is in SO spirit. – davidkonrad Dec 14 '13 at 03:56
You have rewrited your answer so many times that it is in risk going into wiki-mode. – davidkonrad Dec 14 '13 at 03:59
And you insists on jQuery, even it is completely unnesacary http://www.doxdesk.com/img/updates/20091116-so-large.gif – davidkonrad Dec 14 '13 at 04:03

score 1 · Answer 2 · answered Dec 13 '13 at 15:12

1

You can check the files-property of a file input like this :

<input type="file" name="photo" id="photo">

script :

var photo=document.getElementById('photo');
photo.onchange = function() {
    var file = photo.files[0];
    if (file.size>2621440) {
        alert('Filesize must 2.5mb or below');
    }
}

answered Dec 13 '13 at 15:12

davidkonrad

83,997
17
205
265

Yes! But all html5-compatible browsers should support it -> https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications. Dont think I have got any report that it didnt work in a specific browser (but dont have so many users) - will say, if your browser supports `multiple="multiple"` then it will support the file object too. – davidkonrad Dec 13 '13 at 15:22
You are right, http://caniuse.com/#search=HTML5%20form%20features - but almost everything else, as you say "modern" browsers. A flash-solution has a similar problem, since it is not supported on iPad or many smartphones. I would go with the above, and as an extra fallback, check the file after upload and delete if it is larger than 2.5mb. – davidkonrad Dec 13 '13 at 15:36

How to validate form controls data size not more than 2.5 mb?

2 Answers2