File Under: APIs, HTML5, Web Apps

HTML5 File API Brings Drag-and-Drop File Uploads to the Web

The coming HTML5 specification has several tools that take HTML well beyond its humble beginnings as a markup language and give web developers some powerful scripting tools. The W3C, the group that oversees the development of HTML5, has just published a draft spec of yet another powerful tool — the HTML5 File API.

The File API is designed to improve the way browser-based webapps handle file uploads, and it even makes it possible to create pages with drag-and-drop upload fields. The draft defines a new input option, <input type="file">, for handling uploads.

Even better, the API gives developers a way to hook into the upload data and display upload progress and other information.

The downside is that, because it’s so new, very few browsers have implemented the File API. The furthest along appears to be Firefox, which supports enough of the File API to have created a drag-and-drop demo. If you’ve got a copy of the latest alpha build of Firefox 3.6, try dragging a file from your desktop into the black box on the demo page.

Still, while widespread support might be a ways off, the File API promises to give web apps a way to behave a bit more like their desktop cousins — drag-and-drop support, the ability to handle multiple simultaneous uploads and show upload progress — all without the need for Flash or other outside tools.

For more details on what you can do with the HTML5 File API and how to access its methods using JavaScript, head over to Ajaxian, which has an in-depth look at the new API and its methods.

See Also: