Drag-and-drop file upload in Google Chrome/Chromium and Safari?
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.
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.