Drag-and-drop file upload in Google Chrome/Chromium and Safari?

Question

Drag-and-drop file uploading can be done in Firefox 3.6.

A Google search for html5 drag-and-drop file uploading -gmail gives things like:

• Native Drag +

Answer 1

You may be interested on something more technology- and browser-compliant.

Seems to me that Plupload does it well, supporting the following features:

• Chunking
• Drag/Drop
• PNG Resize
• JPEG Resize
• Type filtering
• Stream upload
• Multipart upload
• File size restriction
• Upload progress

for most of the following technologies:

• Flash
• Gears
• HTML 5
• Silverlight
• BrowserPlus

And yes, since 2010.05.27, it supports drag/drop for HTML5 running on Chrome beta.

Answer 2

you can use FormData to store the File, then upload it. e.g

function setUp(){
  var dropContainer = document.getElementById("container");
  dropContainer.addEventListener("drop",dropHandler,false);
  dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false);
  dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false);
  dropContainer.addEventListener("drop", dropHandler, false);
  getResult()
}
function dropHandler(event){
  var files = event.dataTransfer.files;
  var count = files.length;
  form = new FormData();
  for(var i= 0;i<count;i++){
    form.append("file"+i, files[i]);
  }
  sendData();
}
function sendData(){
  var xhr = new XMLHttpRequest();  
  xhr.upload.addEventListener("progress", uploadProgress, false);  
  xhr.addEventListener("load", uploadComplete, false);
  xhr.addEventListener("error", uploadFailed, false);  
  xhr.open("POST", "/upload");
  xhr.send(form);
  var progressBar = document.getElementById('progressBar');
  progressBar.style.display = 'block';
  progressBar.style.width = '0px';
}

the demo is here(http://flexinnerp.appspot.com/) just enjoy it :)

Answer 3

For our own application, we do drag and drop for FireFox only. We revert to the traditional iframe upload for others. In order to detect that drag and drop is supported, we run this code:

if (typeof(window.File) == 'object' && typeof(window.FileReader) == 'function' && typeof(window.FileList) == 'object') {
   // DnD is supported!
}

Hope this is helpful to some.

Answer 4

The latest browser support file upload well. You could use:

xhr = new XMLHttpRequest();     
xhr.open('POST', targetPHP, true);
var formData = new FormData();
formData.append('upload',file);
xhr.send(formData);

You do not need to set boundary or any head，just like this it works fine. I tested this code in client:firefox 6.02 and in chrome 13. server:tomcat with "spring mvc"

Answer 5

Set multiple attribute like:

input type="file" name="file1" multiple="multiple" class="DropHere"

and use this CSS DropHere class:

.DropHere
{
    height: 100px;
    padding: 3px;
    border: 2px dashed #555;
    border-radius: 5px;
    cursor: default;
    background-image:url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='220px'><text x='55' y='75' font-size='20'>or drop files here</text></svg>");
    background-repeat: no-repeat;
}

The file field will now look like:

If you use asp.net you might also like this article I wrote "Multiple file upload with progress bar and drag and drop": http://www.codeproject.com/Articles/818561/Multiple-file-upload-with-progress-bar-and-drag-an

Answer 6

WARNING: This is compatibility code for very old versions of Safari and Chrome. Modern browsers all support the FileReader API; here's one tutorial: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

This code is now only useful if for some reason you have a need to support Safari 5 and older, or Chrome 6 and older.

---

One possibility is to use the method used in SwellJS:

Use <input type="file" multiple="multiple" /> like so:

<form method="post" enctype="multipart/form-data" id="uploadform">
  <input type="file" name="dragupload[]" multiple="multiple"
  onchange="if (this.value) document.getElementById('uploadform').submit();" />
</form>

The input element can be styled to have opacity: 0 and positioned (absolutely) over an element that accepts uploads. The entire form can be placed inside an iframe for "pseudo-Ajax" like behavior. And the upload element can be a layer hidden until something is dragged over it.

Such an iframe would look like:

<script>
<!--
  var entered = 0;
-->
</script>
<body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
  <form method="post" enctype="multipart/form-data" id="uploadform">
    Things can be dragged and dropped here!
    <input type="file" id="uploadelement" name="dragupload[]" multiple="multiple" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
  </form>
</body>

This should only be done when Safari or Chrome is detected (since other browsers don't support drag-and-drop onto <input type="file" /> elements), and can be used in combination with the HTML5 drop event for Firefox 3.6+.

I can't tell if this is the method Gmail uses, but it certainly works about as well.