HTML5 drag-drop uploads - html

Question

Does anybody know how to use HTML5 to achieve uploads by drag-drop files form desktop?
I have found the following references:
Selecting files using drag and drop (2017-08) on developer.mozilla.org
Drag and drop file uploading using JavaScript the article states that the api was changed and links to The File Api has changed (2010-09)
html5-drag-and-drop-multiple-file-upload (2017-11 returns 404) on http://www.appelsiini.net/ (is still live)
but is there a solution that can run on all platforms: Firefox, Chrome and Safari?
Many thanks!

Answer 1

Sorry, at the moment there is no cross browser solution available.
Current Browser Implementation Issues
FF, Safari, Chrome, IE (Cross-Browser Issues)
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.*
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.* (Beta)
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 FormData object is a new JavaScript object that allows a web developer to insert file 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.
Chrome (latest)
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 this issue.
Internet Explorer
To be honest, I haven't even bothered trying to do drag and drop uploads in Internet Explorer yet. Trying to support IE is a pain due to lack of good development tools and a non-conforming JavaScript engine. Since I haven't been able to get all the preferred browsers to play nice, I can't imagine Internet Explorer will be even close.
source

Answer 2

I would defiantly look into running Plupload. It allows great browser capability and supports multiple file drag and drop in HTML5 browsers that support FileReader.
So lets say for example you dont have html 5 it will deprecate down to flash / gears / silverlight depending on what that individual has installed.
Here's the compatibility chart:
http://www.plupload.com/index.php
It has an option called droparea: "somediv" that allows you to drag files into it and automatically cue up a file upload.
Let me know if you need any help setting it up.

Answer 3

Here is a simple example. If you drag an image over the red div it appends the image to the body. I've confirmed it works in IE11, Chrome 38, and Firefox 32. See this Html5Rocks article for a more detailed explanation.
<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>
<script>
var dropZone = document.getElementById('dropZone');
// Optional. Show the copy icon when dragging over. Seems to only work for chrome.
dropZone.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
// Get file data on drop
dropZone.addEventListener('drop', function(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files; // Array of all files
for (var i=0, file; file=files[i]; i++) {
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function(e2) {
var img = document.createElement('img');
img.src= e2.target.result;
document.body.appendChild(img);
}
reader.readAsDataURL(file);
} } });
</script>