HTML5 - code example of File API - drag and drop hard drive files to a webpage!
bobleah 270000CN12 Comments (33) Visits (91861)
In previous blog entries, I shared HTML5 code examples for drag & drop, Geolocation, contenteditable and localStorage. Today, I will share a simple app that provides a code example of FileReader, which is part of the File API specification of HTML5.
As in my previous HTML5 examples, I'm seeking to create a simple but useful demonstration that exercises HTML5 in a novel way. My goal is to not only demonstrate the HTML5 API, but to give examples on how a developer may actually implement the API in a useful and innovative manner.
Accessing the local file system from a web page has been greatly simplified in HTML5, using the File API. The File specification provides an API for representing file objects in web applications, as well as programmatically selecting them and accessing their data.
The File API includes:
How the demo works:
For my example, I have provided a palette from which to drag & drop into, or alternatively use the File chooser, to select image files off your local file system. For this example, please select image files only, as I have not built in any filtering or error detection for non-graphical files. Remember, with HTML5 not fully implemented in all browsers, this sample
will require an HTML5 compliant browser, such as Firefox 3.5 or above.
The key methods to implement the File APIs are basic and easily implemented as follows:
I chose the <
You can download the complete HTML of this example by