html5 file upload

File uploads have traditionally had very bad usability on the web. The standard solution was uploading files as part of a form, leaving the user to just wait until the process was done. We could offer barely any feedback of what was going on. Several options appeared in HTML5 to make the process more bearable for the user.

In HTML5 input element have got new attribute multiple. It allows to upload multiple files at once without using Flash based uploaders. This attribute receives one value "multiple" and looks like this:

<input type="file" multiple="multiple" name="files[]" />

Pay attention to name, I specified it as an array to receive array of files in PHP script.

Once there is the question, what kind of browser does not understand this html5 innovation, the answer is easily predicted, a family of Internet Explorer. Starting with version 9 and below, they do not support this functionality and simply ignore the attribute and sincerely hope that in the final 10 version, they are corrected.

Besides that, we gave the users to upload many files at once, we must take care of them and give them the opportunity to download just the files we need. And then comes to help another new attribute accept. Which takes the "MIME Media Types".

<input type="file" multiple="multiple" name="files[]" accept="image" />

This HTML5 code means that you can only upload images, and in the file chooser dialog filed are filtered and will show the user only image file types. Firefox and Safari ignores accept tag.

And again we have a problem, the user attempts to send the form, but he was so busy that forgot to fill in file input field . We should not give him a reason to be nervous in this situation. Use another new attribute. Attribute is required, takes a string «required», and makes the field mandatory.
``` ```

How will it work when you try to send the form with an empty input, a warning about an error with the following text:

Firefox html5 file uploads view

Firefox html5 file uploads view Chrome html5 file uploads view

Chrome html5 file uploads view

Opera html5 file uploads view

Opera html5 file uploads view

To my surprise, Safari did not show a warning and sent a blank form. The pictures above show how it looks in the three browsers, Chrome does not show a very pleasing look, but once he showed an addition to the errors that took the title of the item.

Html5 file upload and javascript

There are still several problems  to be solved for the convenience of the user.

  • Check the file type
  • File sizes
  • Number of Files
And we have a very simple way to check things out with JavaScript. In the file input element there is an invisible attribute "files", when accessing it returns FilleList object

var inputFile = document.getElementById('input').files;

FileList : {
	0,
	1,
	2,
	length: 3,
	item
}

Where 0,1,2 are keys of uploading files. Length, number of files Method item() returns file item object.

Refer to the file in two ways:

// First way
var file = inputFile[0];
// Second way
var file = inputFile.item(0);

The variable file will contain a file object:

File : {
	constructor: File {...},
	fileName: 'image.png',
	fileSize: 879394,
	name: 'image.png',
	size: 879394,
	type: 'image/png',
	getAsBinary,
	getAsDataURL,
	getAsText,
	lastModifiedDate: 'Thu May 16 2011 00:01:34 GMT+0300 (Eastern Europe Daylight Time)'
}

Opera has no properties fileSize, FileName but there is a name and size. In Chrome, Firefox, Safari has all four properties. Only in Chrome is the property of lastModifiedDate.

Lets look closer on three methods.

  • getAsBinary: get the source  data of file
  • getAsDataURL: get the data converted to base64
  • getAsText: Returns the file's contents as a DOMString in which the file's data is interpreted as text using a given encoding
Method getAsDataURL, a very useful thing, as an example it ispossible to show previews of files to be uploaded even before sending them to the server.

Using JavaScript for form validation gives wide possibilities to test  the file size, quantity and even up to the validation of pixels in the image.

Good resource for expolring other html5 details of input element is here