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

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 like so:

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:

  

    Things can be dragged and dropped here!
    
  

This should only be done when Safari or Chrome is detected (since other browsers don't support drag-and-drop onto 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.