Thursday, August 26th, 2010

How to Drag Out Files Like Gmail

Category: Google, JavaScript

<>p>Ryan Seddon, aka the CSS Ninja, has a nice blog post up where he reverse engineers the new feature in Gmail where you can drag attachments from an email on to your desktop.

Note that the feature only currently works in Chrome.

Ryan begins with the following code:

javascript
< view plain text >
  1. var file = document.getElementById("dragout");
  2.  
  3. file.addEventListener("dragstart",function(evt){
  4.   evt.dataTransfer.setData("DownloadURL",fileDetails);
  5. },false);

Describing the code Ryan says:

From the code above you attach an ondragstart event listener to something you want to “drag out” and save to your file system. On the dragstart event you set the data using the new “DownloadURL” type and pass file information to it.

Note though that in order to pass the correct data to the dragstart event you need to provide a download URL that can be passed to the setData("DownloadURL" call. Ryan uses the HTML5 data-* attribute to pass this custom data in:

  1. <a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
  2.    application/octet-stream
  3.    :Eadui.ttf
  4.    :http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a>

The custom attribute uses three different fields of data separated by colons:

The files mime type, the name you wish it to be saved as (this can be anything) and the url to where the file can be downloaded from.

Nice find Ryan!

Related Content:

Posted by Brad Neuberg at 6:00 am
5 Comments

+++--
3.5 rating from 13 votes

5 Comments »

Comments feed TrackBack URI

When is this getting standardized, and when is it getting to other browsers than chrome? I like cool features as much as the next guy, but this just seems like a hack on chrome to give google a leg up.

Comment by Joeri — August 26, 2010

This shouldn’t have to be standardized, this should be a feature of the browser for every clickable link. With some context menu on release weather to copy the link or the actual file.

Comment by randomrandom — August 26, 2010

Unfortunately all great new features will take years or decades to be available for the majority of users… and there will always be some guys with IE6 that complain about things that don’t work on your site…

Comment by maze — August 26, 2010

@maze :
I know it’s always a pleasure to troll on IE and spurt the same old gimmick about users and software updates, but the HTML5 D&D API was implemented in IE5 11 years ago.
http://msdn.microsoft.com/en-us/library/ms536928(VS.85).aspx

Comment by ywg — August 27, 2010

You will also need to specify the fileDetails variable in the event;

fileDetails = file.getAttribute(“data-downloadurl”);
or
fileDetails = file.dataset.downloadurl;

Comment by hakonvik — August 30, 2010

Leave a comment

You must be logged in to post a comment.