Browser support of drag and drop file uploads

Question

I can't seem to find it online anywhere, just demos or links to the spec, or the Google Gears implementation. That's all great, but I was curious what the actual browser support of it is across the main browsers AND OS. Firefox, Chrome, Safari, Opera, and does IE have an alternative? What about IE9?

Solution 1

Firefox 3.5+ has a nice drag-and-drop api: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

Chrome you can can drag and drop onto a file upload, so, you can do drag and drop, but you have to fake it by hiding the form via opacity:0 but make it large via a wrapping div and a width:100% and height:100%: http://www.thecssninja.com/javascript/gmail-upload

Safari is the same as Chrome except you can only do one file at a time, more on this at the link above at the end of the post (thecssninja link)

IE it seems like you can use VBDataObject or ActiveX, but i'm still not quite sure where to find more information. I can just find little snippets of information about how you could use those: http://www.codingforums.com/showthread.php?t=36896 -- If anyone can help me with how to get IE to support it, let me know.

Opera has nothing at all it seems. Just playing with it, it acts like IE where if you drag onto a file upload it just opens that file. If anyone knows away around this let me know.

Solution 2

To support HTML5 drag and drop file upload, the browser should support the drag and drop(DnD) API and the File API simultaneously.

IE supports the DnD from IE5 but it doesn't support the File API even in IE9. Opera supports the File API from 11.1 but doesn't support the DnD.

So you can use drag and drop file upload in Firefox 3.6+, Safari 6.0+, Chrome 9.0+.

Check this compatibility table.

DnD http://caniuse.com/#search=drag

File API http://caniuse.com/#search=fileapi

Solution 3

The PIUpload project has a compatibility table. It says

Drag/drop support of files is currently only available in Firefox 3.5+. WebKit/Opera doesn't support this feature yet.

Solution 4

Safari 5 does indeed support drag and drop of multiple files from the desktop to the browser. I've been using this feature for a good long time now, and I'm happy to share my code if you like.

View more solutions