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.
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
Chrome 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
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
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