{{ !articles[0].partner.isSponsoringArticle ? "Platinum" : "Portal" }} Partner
css,javascript,html & xhtml

Using the File API for reading file information & multiple file uploads – another sister specification to HTML5

A constant drag when developing web sites have been when the end user wants to upload files to it. Luckily, though, those problems are to come to an end due to the File API.

What is it?

The File API is there to describe how interactions with files are handled, for reading information about them and their data as well, to be able to upload it.

There are two ways you can detect the files a user is trying to upload:

  • Through an <input type="file"> element and its onchange event.
  • By drag and drop you can use the ondrop event to detect which file(s) were dropped.

Code sample

Let’s take a look at an easy sample. First, for the onhange event for the <input type="file"> element, that element has a specific files property you can check:

<!-- The multiple attribute allows for uploading of multiple files -->
<input id="files-upload" type="file" multiple>
var filesUpload = document.getElementById("files-upload");
filesUpload.onchange = function () {
// Access to data about all files
var files = this.files;

Similarily, for the ondrop event handler on virtually any element, you can check for file data in the event.dataTransfer property:

<p id="drop-area">
Drag and drop files here
var dropArea = document.getElementById("drop-area");

// Needed for web browser compatibility
dropArea.ondragenter = function () {
return false;

// Needed for web browser compatibility
dropArea.ondragover = function () {
return false;

dropArea.ondrop = function (evt) {
var files = evt.dataTransfer.files;
return false;

So, when we have a reference to the files to work with, we can iterate over them and read out their data:

for (var i=0, il=files.length; i<il; i++) {
file.name; // Get the name of the file
file.size; // Get the size of the file, in bytes
file.type; // Get the type of the file

In my tests, the type of the file seems fairly consistent, but for Photoshop files, Firefox and Google Chrome reported different types (although both with Photoshop in their value :-) ).


I have put together a demo of the File API in action, as a part of my HTML5 – Information and samples for HTML5 and related APIs testing ground, where you can upload files via a field or drag and drop.

Web Browser support

At this moment, this works in Firefox 3.6+ and latest Google Chrome and Safari. In Safari, though, it does support the API but seems unable to read out any information about the files.

Taking it to the next level

After you have read out the necessary data about the file(s), you can get the binary data by using a FileReader object and then use the XMLHTTPRequest object to post it to a web server. More information about that can be found in the FileReader documentation and in Paul Rouget’s article Interactive file uploads with Drag and Drop, FileAPI and XMLHttpRequest.

Happy filing! :-)

Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks