Explaining How Gmail's Drag and Drop From the Desktop Works

CSS Ninja details how Gmail's "drag & drop" from the desktop works; CSS Ninja recreated the code in a demo. The code works in Firefox and Chrome. On Firefox the File API is used while on Chrome a different API is used.How does Chrome work?"Using a bit of CSS trickery we can create illusion of […]

CSS Ninja details how Gmail's "drag & drop" from the desktop works; CSS Ninja recreated the code in a demo. The code works in Firefox and Chrome. On Firefox the File API is used while on Chrome a different API is used.

How does Chrome work?

"Using a bit of CSS trickery we can create illusion of having File API support and still allow users to drag & drop files from desktop into Gmail. I accomplish this by having 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 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. When the drop input is activated a change event is fired and the files can be enumerated. The actual uploading is handled by XHR2: "Using XHR2 and upload attribute to attach progress events so we can do a real progress bar that indicates to user how much the file has uploaded."

More Info: Gmail Upload