diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)

Sep262010

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 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

Share This Story, Choose Your Platform!

Get Latest News

Subscribe to Digital News Hub

Get our daily newsletter about the latest news in the industry.
First Name
Last Name
Email address
Secure and Spam free...