Robert has been working with web developing, mostly interface coding, since 1998. His biggest interests lies in HTML, CSS and JavaScript, where especially JavaScript has been a love for quite some time. He regularly blogs at http://www.robertnyman.com about web developing, and is running/partaking in a number of open source projects (http://code.google.com/u/robnyman/). Robert is a DZone MVB and is not an employee of DZone and has posted 57 posts at DZone. You can read more from them at their website. View Full User Profile

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

08.19.2010
| 5449 views |
  • submit to reddit

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
</p>
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 :-) ).

Demo

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! :-)


References
Published at DZone with permission of Robert Nyman, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)