Published on August 11th, 2010 | by Alan Bush1
HTML5 File Drag and Drop
Hi my name is Philip Snyder. You may remember me from other blog posts such as Files, Folders & Organization and Central Desktop’s MVC. I’ve been working on the folder tree in Files & Discussions here at Central Desktop, giving you the best interface we can for browsing and managing your files. It is my goal to give you an interface that is intuitive, familiar, and easy to work with. Today I’m going to talk a little about an exciting feature in HTML5 that promises to make your life even easier!
First off, I should clear up that HTML5 is an “upgrade” to the aging HTML4 specification… there are various improvements and a large subset of new functionalities; some of which are still being formalized. This feature list includes support for audio and video streaming, native dragging and dropping of elements in the web page, and Canvas — which is kind of like Microsoft Paint for web developers.
Drag and drop is fairly basic functionality that almost everyone uses on a daily basis locally on their computer. We thought that the new support for File Drag & Drop in HTML5 would be an excellent way to make our file and folder management behave even more like your local computer. The concept is that you should be able to drag files from your Windows Explorer or Mac Finder window directly into your Central Desktop folders and have them automatically upload.
Sounds great doesn’t it? I wish it were that simple. Unfortunately, since HTML5 is still relatively new, almost every browser is either still implementing it or has various differences in implementation that make a web developer want to cry. To make matters more complicated, accessing file information is even newer than the HTML5 specification, which means that if I’m going to support all the browsers, I’ll have to hack my way into the next decade to create a cross-browser library to support them all.
Well, that’s where I started. After spending a decent amount of time attempting to get them all working, I have come down to 2 basic conclusions.
- Google Chrome is awesome!
- File Drag & Drop is just not ready for prime time yet.
Browser Implementation Issues
The following is a list of issues I have encountered:
No recursive folder uploading — as a matter of fact, no folder uploading at all. While this
isn’t a show stopper, it does seem kind of silly to allow a user to select a folder in the
file upload input box if the browser won’t send all the files inside that folder too.
Firefox 3.6.* Issues
This browser supports file drag and drop, however the implementation is quite possibly the
worst ever conceived. In order to upload a file that the user dropped, we have to read the
entire file into memory and then send it over Ajax to our servers. This works fine for drops
of around 10MB. If you try that same operation with a 400MB file, forget it!
Firefox 4.* Issues
The Mozilla developers are quick ones — they realized the problem with their previous
implementation and have created a whole new way to implement drag and drop uploading. The
uploads directly into an Ajax request without reading the files into memory first. I was
really excited about this and promptly downloaded Firefox 4 which is in its 2nd beta. After
playing around with it for less than 5 minutes, I strongly discourage you from trying it yet.
My system became incredibly unstable and slow and development was a major pain due to lack of
support for Firebug.
This browser is by far the best in its implementation! Simple and straightforward, my only
complaint here is that you can’t upload a folder and its contents via drag and drop.
Safari 4.* & 5.*
Since Safari is built on top of WebKit just like Google Chrome, I expected it to work just as
well. Wow, was I mistaken! I tried this in both Safari 4 and Safari 5. While dragging and
dropping multiple files into the window works, Safari sends the first file multiple times,
instead of sending all the files. Talk about a MAJOR bug. To make it even more interesting, if
the user clicks on the drop location, they can select multiple files to upload using the
standard file selection dialog — and that works as expected! I can’t wait for Safari to fix
To be honest, I haven’t even bothered trying to do drag and drop uploads in Internet Explorer yet.
Based on 15 years of experience, trying to support IE is a pain due to lack of good development
browsers to play nice, I can’t imagine Internet Explorer will be even close.
So what is the end result? Here at Central Desktop we’re going to deploy file drag and drop for Chrome only at the moment.You’ll still be able to use our Java drag & drop uploader in all the other browsers and you’ll even have that option inside Chrome as it supports recursive folder uploads.
- Related Blog Posts:
- Drag-and-drop file upload in Google Chrome/Chromium – StackOverflow.com