HTML5 Drag and Drop uploading
Join the DZone community and get the full member experience.
Join For FreeDrag and drop uploading is a nice user interface, which provides a quick integration between the browser and the filesystem. Unless you're already storing everything online, you will upload many, many files every day.
GMail has used this interface for quite some time, and with the diffusion of HTML 5 almost everyone can include it in a web application without too much hacking.
Under the hood
There are several HTML 5 APIs involved in this mechanism:
The Drag and Drop API generates events after elements are dragged over a certain area, or dropped there. This API is necessary to obtain references to the files the user wants to upload.
The File API provides access to the filesystem instead. Back in the old 2000s, the only way to upload files via HTTP was an <input type="file"> element: all the solutions centered among embellishing its form, unless you wanted to include a Flash or Java applet to perform the same job with more flexibility.
The File API also became asynchronous while it was in the workings: the user interface won't freeze while you're accessing files. Thanks to this API, you can start the acquisition of a local file and specify a callback to be informed of the end of the operation.
XMLHttpRequest (the object for performing Ajax requests) also comes into play. The classic way to upload files involved the file <input> element, bypassing Ajax: the element was usually wrapped in an invisibile iframe to simulate an asynchronous request. Actually, file upload requests are just POST requests with the right headers and an entity body containing the base64 encoding of the file. Thus, now that we can access the file's content programmatically, we can also upload it via Ajax.
Some examples and support
Mika Tuupola has a nice tutotial compared to its old Google Gears version. This time, it's all HTML 5. He shows also how to deal with the server side with some PHP code, although it is no different than from standard uploads (apart from the fact that the generated response is read via Ajax, so it's not mandatory to produce an HTML page.)
The buzzmedia features a similar tutorial, but provides info on browser support updated to June 2011:
- Chrome and Firefox have no issues, being the first to support the File API and with many newer, automatically updated versions rolled out (we're talking about Firefox 3.6 as a minimum, while I'm running 7).
- Safari 5 works with a different API, which will be uniformed to the standard in Safari 6.
- Internet Explorer 10 will support the File API too (it's not a statement of intents: the preview version already does.)
- Opera 11 supports the File API.
The Drag and Drop API has support from all major players (IE, Firefox, Chrome, Safari) apart from Opera, which is waiting for the specification to become stable.
Mobile browsers sometimes support the File API (e.g. Android 3.0 and newer), but never support the Drag and Drop one; I'm not sure it would make sense on a phone display, although it would on a tablet screen. By the way, the upgrading policies are more difficult to deal with on mobile devices, so to upload lots of files reliably you should stick to native applications for now.
A library
If you want to quickly integrate this functionality in your application, a JavaScript library is a good choice. Nothing on the server-side will change.
html5uploader allows you to specify some HTML elements to build a uploading area with a single line of JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<script src="html5uploader.js"></script>
</head>
<body onload="new uploader('drop', 'status', '/uploader.php', 'list');">
<div id="box">
<div id="status">Przeciągnij plik z lokalnego folderu do pojemnika ...</div>
<div id="drop"></div>
</div>
<div id="list"></div>
</body>
</html>
Of course you can wrap the function into a namespace to avoid conflicts, or creating the object inside $() or your own onload handler. Check out html5uploader's online demo to get a feel of how the process works (it even makes previews for image, although that's the server-side part.)
Opinions expressed by DZone contributors are their own.
Trending
-
Never Use Credentials in a CI/CD Pipeline Again
-
Seven Steps To Deploy Kedro Pipelines on Amazon EMR
-
Alpha Testing Tutorial: A Comprehensive Guide With Best Practices
-
Web Development Checklist
Comments