Menu
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:
All of these guides use FileReader (or the Firefox 3.6's deprecated getAsBinary, which no other browser supports, either).
However, Google recently released an update for Gmail that allowed drag-and-drop file uploading in Chromium as well as Firefox, and Chromium does not have FileReader. I'm using the latest Chromium nightly, and it can drag-drop upload files, while not supporting FileReader.
I've seen someone mention that drag-drop uploading can be possible by dragging onto an <input type="file" />, 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.
So the question is, how do they do it? How do you support Chromium for HTML5 file uploading? In addition, can you support Safari?
906
Just hold on your left mouse button, performing a drag-n-drop, yeah, links open in the new tab. With CTRL button holding on, drag-n-drop, your web page will be opened in an inactive state. The drag-to-search feature is also useful and friendly to use.
Fixing Drag-and-DropType "Touch" into the search bar and set the following options to "Enabled". You will have to relaunch Google Chrome for these setting changes to apply. Once you have relaunched Google Chrome, drag-and-drop gestures should now work on most compatible websites.
Firstly, you click on an element, hold the mouse button down, and drag it to another location. Then, to drop it, you just release the mouse button. While it is a long-established feature on many user interfaces, Drag and Drop is much easier to code in HTML5, where you can drag any element.
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.
136
You may be interested on something more technology- and browser-compliant.
Seems to me that Plupload does it well, supporting the following features:
for most of the following technologies:
And yes, since 2010.05.27, it supports drag/drop for HTML5 running on Chrome beta.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
