Wednesday, August 12th, 2009
The W3C has published a working draft for the File API which gives us a much improved <input type=”file”> and programmatic ability to work with file uploads and the like.
There are actually a few pieces to this work, which does a good job interfacing with other standards too:
This specification provides an API
for representing file objects in web applications, as well as programmatically selecting them and accessing their data. This includes:
- A FileList interface, which represents an array of individually selected files from the underlying system.
The user interface for selection can be invoked via
<input type="file">, i.e. when the
- A FileData interface, which provides asynchronous data accessors for file data via callback methods.
- A File interface, which includes readonly informational attributes about a file such as its name and its mediatype.
- A FileError interface, which defines the error codes used by this specification.
The API to get access to selected files is trivial (
document.getElementById("myFileInput").files.length etc) and then you can get the file data itself in various forms (data: URL, text, binary, Base64, new filedata:// URL).
An example usage of the filedata URL:
- // Obtain fileList from <input type="file"/> using DOM
- var file = fileList.files.item(0);
- if (file)
- // ... Make asynchronous call
- function handleURL(url, error)
- var img = new Image();
- img.src = url;
- // Other stuff...
- // error conditions
Fun to see this all come together. The editor is a fellow Mozilla-n Arun Ranganathan … an all round good chap :)
Some have talked about alternative solutions such as using XHR to do the work, or DOM events to allow built-in progress events. The working group is listening, what would you like to see?
Posted by Dion Almaer at 6:25 am