StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODrag-and-drop file upload in Google Chrome/Chromium and Safari?
text
Body
copied!<p>Drag-and-drop file uploading can be done in Firefox 3.6.</p> <p><a href="http://www.google.com/search?hl=en&q=html5+drag-and-drop+file+uploading+-gmail" rel="nofollow noreferrer">A Google search for <em>html5 drag-and-drop file uploading -gmail</em></a> gives things like:</p> <ul> <li><a href="https://stackoverflow.com/questions/2121018/native-drag-drop-file-upload-in-firefox-3-6">Native Drag + Drop file upload in Firefox 3.6</a></li> <li><a href="http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload" rel="nofollow noreferrer">http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload</a></li> <li><a href="http://www.thecssninja.com/javascript/drag-and-drop-upload" rel="nofollow noreferrer">http://www.thecssninja.com/javascript/drag-and-drop-upload</a></li> </ul> <p>All of these guides use <code>FileReader</code> (or the Firefox 3.6's deprecated <code>getAsBinary</code>, which no other browser supports, either).</p> <p>However, Google recently released an update for Gmail that allowed drag-and-drop file uploading in Chromium as well as Firefox, and <a href="http://code.google.com/p/chromium/issues/detail?id=37785" rel="nofollow noreferrer">Chromium does not have <code>FileReader</code></a>. I'm using the latest Chromium nightly, and it can drag-drop upload files, while not supporting <code>FileReader</code>.</p> <p>I've seen someone mention that drag-drop uploading can be possible by dragging onto an <code><input type="file" /></code>, but that can only support one file at a time, while Gmail's uploader can handle multiple files being dragged onto it, so that's clearly not what they're doing.</p> <p>So the question is, how do they do it? How do you support Chromium for HTML5 file uploading? In addition, can you support Safari?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload