Input Type File and files sizes

[marcha]

Hi,

Is there a working draft speaking about a functionality
that can solve the folowing problem.

when posting a form with attached files (one or more input type file)
there is no way to know the total post request content-length
before submiting the form, this causes server error when the
post size limit is exceeded.

thanks for your help,

[zcorpan]

Yes, you can use the .files IDL attribute on the <input> element to get a list of File objects, on which you can read the .size IDL attribute to get the size of each file. (Each <input> can have multiple files if you specify the multiple="" attribute.)

http://www.whatwg.org/specs/web-apps/cu ... nput-files
http://www.whatwg.org/specs/web-apps/cu ... t-multiple
http://dev.w3.org/2006/webapi/FileAPI/#dfn-size

If you don't use the multiple="" attribute, it's just a matter of getting the first file in the list and using the form validation API:

Code: Select all

<script>
var MAX_SIZE = 10 * 1024 * 1024;
function validateFileSize(input) {
  input.setCustomValidity(input.files[0].size > MAX_SIZE ? 'File is larger than '+(MAX_SIZE/1024/1024)+' MB.' : '');
}
</script>
<form enctype=multipart/form-data>
<p><label>Select a file: <input name=file type=file onchange="validateFileSize(this)"></label>
<p><input type=submit value="Send">
</form>


If you want to support legacy browsers that don't support setCustomValidity you would need to feature-check for it and fall back to showing a custom message and preventing the form to be submitted the traditional way.

HTH