Limiting File Upload Size

Forms with file attachment fields have a disadvantage in relation to other form fields: Their size isn't automatically limited by the browser.

That is, unless certain JavaScript is implemented. How to implement that particular JavaScript follows these points I want to mention.

• Unlike text fields, file attachment fields (type="file") have no size limit built into the browser.

• Form handling software on the server can check the uploaded file size after the file has been uploaded. (The form handling software has no prior access to the file.)

• It can be really annoying to attach a huge file with a form, wait all that time for it to upload, and then be told the file is too large.

The solution is a bit of JavaScript that tests the file size before its uploaded. No longer do your site visitors have to wait around for their file to finish uploading and only then be told it's unacceptable.

Yes, form users could check the file size (those who know how) before uploading. But really, why should they have to when software can let them know if the file's too big?

The JavaScript solution is a convenience for your site visitors so they'll know immediately if the file they're wanting to attach exceeds the maximum — before they get impatient with the form and its delayed error messages and just abandon the whole thing.

Two caveats:

• Because the solution is JavaScript, it can be bypassed.

• Sizes won't be checked by some older browsers, especially IE. (I haven't had opportunity to test the latest IE version.)

The form can be used with any browser. If an incompatible browser, the form itself will work just fine, but the form user won't have the convenience of having their file sizes checked before they're uploaded.

The JavaScript solution doesn't do away with the form handling software on your server needing to check uploaded file sizes. The solution is just a way to be more user-friendly.

Example

Here's an example form. It won't submit, but will check the file size when the button is clicked. If the size is over 2 megabytes, and your browser is compatible, you'll see an alert box message letting you know the file is too big. (Otherwise, no message.)

Source Code

For reference, here's the source code of the example form.

<form action="example.php" method="post" enctype="multipart/form-data">    
<input type="file" id="file-upload" name="uploaded">
<br>
<input type="submit" onclick="return VerifyUploadSizeIsOK()" value="Button to click">
</form>

You'll notice that the input type="file" field has an id value file-upload — which the JavaScript will need to know about. You'll also notice that the submit button has an onclick attribute that calls the JavaScript function VerifyUploadSizeIsOK().

(An "onsubmit" attribute in the form tag instead of an "onclick" attribute in the submit button tag would also work — in this instance. But there are situations where the "onsubmit" attribute won't work. See the Firefox, 'onsubmit', and HTML5 'required' Attribute blog post.)

Here's the JavaScript to check the file size. Notes follow.

<script type="text/javascript">
function VerifyUploadSizeIsOK()
{
   /* Attached file size check. Will Bontrager Software LLC, https://www.willmaster.com */
   var UploadFieldID = "file-upload";
   var MaxSizeInBytes = 2097152;
   var fld = document.getElementById(UploadFieldID);
   if( fld.files && fld.files.length == 1 && fld.files[0].size > MaxSizeInBytes )
   {
      alert("The file size must be no more than " + parseInt(MaxSizeInBytes/1024/1024) + "MB");
      return false;
   }
   return true;
} // function VerifyUploadSizeIsOK()
</script>

You'll notice the id value file-upload of the form's input type="file" field is repeated in the JavaScript as the value of the UploadFieldID variable. If the form field's id value changes, the value in the JavaScript needs to be changed accordingly.

You'll also notice the 2097152 value for the MaxSizeInBytes variable. The value is specified as a number of bytes. (One megabyte is 1024 X 1024 = 1048576 bytes). Change the value as needed for your implementation.

Those are the only modifications the JavaScript needs.

Put the JavaScript anywhere on the page. Immediately above the cancel </body> tag should work.

Your form will then test the size of the file before it's uploaded and avoid at least some user frustration.

Forms With Multiple File Upload Fields

The JavaScript in this article will check only one file attachment field.

You're welcome to copy and modify the code to write a function for checking sizes of multiple file attachment fields. Error messages can be written to correctly identify which field or fields have files that exceed the maximum size.

If you or your JavaScript programmer need help with creating a custom function, see the custom programming page or get in touch with me directly through our contact form.

(This article first appeared in Possibilities ezine.)

Will Bontrager