The CSS Ninja details how Gmail's drag and drop from the desktop works; when you drag a file from the desktop into Gmail the file will automatically start uploading.
The CSS Ninja recreated the code in a demo (source code [zip]).
The code works in Firefox and Chrome. On Firefox the File API is used (detailed in another blog post) while on Chrome a different API is used.
How does Chrome work?
Using a bit of CSS trickery we can create the illusion of having File API support and still allow users to drag and drop files from the desktop into Gmail. I accomplish this by having the drop zone, which becomes visible on a dragenter event, contain an invisible file input with a 100% width and height of the drop zone area. The file input also has the attribute multiple on it allowing a user to drop multiple files.
The drop zone is hidden by default until a dragenter event happens on the BODY tag:
position: relative;
}
#drop input {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
When the drop input is activated a change event is fired and the files can be enumerated:
TCNDDU.handleDrop = function (evt) {
var files = evt.target.files;
dropArea.style.display = "none";
for(var i = 0, len = files.length; i <len; i++) {
// iterate over file(s) and process them for uploading
}
};
Using XHR2 and the upload attribute to attach progress events so we can do a real progress bar that indicates to the user how much the file has uploaded.