Google in their quest to keep me busy in trying to figure out how they do their innovative features in Gmail are at it again. First it was drag and drop uploading which used a clever trick to make it work in Chrome which currently doesn’t support the FileReader in their stable release. Now they’ve added the ability to drag out attachments to your file system, allowing you to bypass the usual method of the save dialog. While the first feature of drag and drop uploading I figured out quite easily, this drag out feature was a doozy. There were two clues which got me started. One it only works in Chrome so it had to be an extension to the current Drag and Drop API. Two, after some poking around in gmail, there was a custom attribute on the attachment link called download_url which colon separated the attachments mime type, file name and download link. Since Gmails JavaScript is obfuscated to within in an inch of its life there was no easy way to attach the built in debugger to anything that might give it away. So I tried downloading the script and running it through various unobfuscaters which made it format nicely but I still had to work with function names like vHG etc. My last hope was chromiums bug tracker and searching to see if any bugs or feature requests were filed that could help give it away. I knew the download_url attribute played a role and it would be set using setData method on the dataTransfer object. So I searched high and low on Chromiums bug tracker for matches to “download_url”, “downloadurl” & “downloadurl setData” nothing nada, zip. So I turned to the webkit bug tracker, still nothing! So I thought maybe Mozilla had discussed it on their bug tracker, a long shot but worth a try. Bingo! This bug led me to thisbug, on webkits bug tracker don’t ask why the search didn’t bring this up, and then onto thisproposal. We’re in business! So we’ve found the details let’s play with it. The above demo will, in Chrome 5+, allow you to drag any of the items to your desktop and save them without having to go through the usual save dialog process. 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. In order to pass the correct information to the event we access the download_url attribute and use that for our setData call. I’ve made one change that is slightly different to how Gmail sets and gets the attribute. Instead of creating a new attribute I have instead used the new custom data attributes specified in the HTML5 spec. While not officially supported by Chrome yet we can still use it and add a simple test for support and fork the code either way. The custom attribute needs three things specified that are separated by colons in order for it to work. 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. Above I do a check to see if the element supports the dataset attribute if not use getAttribute to grab the value. Playing around with this new functionality I did find a cool side effect that if I drag a file that’s set the DownloadURL type on the setData method into a page using Firefox 3.6+ that will capture a drop event the dataTransfer file attribute will act as though it’s captured a local file and can be manipulated with the FileAPI e.g. In my font dragr web app if I drag a font file that’s been attached to an email it will render the font as though I’ve dragged it from my local file system! Doing the same with Chrome 6, which also supports file attribute on the dataTransfer property, will ignore the drop. So what do I think the Gmail team will do next? Since they announced, and are now starting, their 6 week release cycle of chrome. I foresee the ability to upload folders not just individual files, being able to capture a photo from your web cam straight into an embedded picture using the proposed media capture proposal. Whatever it is I’m sure it’ll knock everyone’s socks off and make me rack my brain in trying to figure it out. Short URL: http://cssn.in/ja/028 Post filed under: html5, javascript. [...] » HowTo: GMail File Dragout Der CSS Ninja hat eine gute Anleitung erstellt, wie er den File Dragout von GMail entsprechend nachgebaut [...] [...] Drag out files like Gmail | The CSS Ninja – All things CSS, Javascript & xhtmlthecssninja.com [...] [...] Drag out files like Gmail | The CSS Ninja – All things CSS, Javascript & xhtml – August 25th %(postalicious-tags)( tags: javascript html5 css gmail dragdrop chrome download file reference )% [...] [...] 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 [...] [...] This post was Twitted by theystolemynick [...] [...] 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 [...] [...] via Drag out files like Gmail | The CSS Ninja — All things CSS, Javascript & xhtml. [...] [...] }Brad Neuberg Read Post 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 [...] [...] 26 Aug 2010 Powered by Max Banner Ads 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 [...] [...] La gente de CSS Ninja ha publicado un artículo explicando como conseguirlo nosotros mismos en nuestras páginas…. [...] [...] by a blogpost of the css-ninja which i stumbled upon at ajaxian.com, i quickly hacked this jQuery plugin – [...] [...] http://www.thecssninja.com/javascript/gmail-dragout [...] [...] Drag out files like Gmail | The CSS Ninja – All things CSS, Javascript & xhtml (tags: dragdrop file web) This entry was posted on Friday, August 27th, 2010 at 8:04 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. « links for 2010-08-24 [...]Drag out files like Gmail
How did I figure it out?
How does it work?
var file = document.getElementById("dragout");
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);
<a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
application/octet-stream
:Eadui.ttf
:http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a>var fileDetails;
if(typeof file.dataset === "undefined") {
// Grab it the old way
fileDetails = file.getAttribute("data-downloadurl");
} else {
fileDetails = file.dataset.downloadurl;
}
A cool finding
Predicting the next challenge from Google
Comments
Trackbacks
'Programming > JavaScript/AJAX' 카테고리의 다른 글
| JavaScript, AJAX, jQuery 강의 모음 (1) | 2010.12.09 |
|---|---|
| [jQuery] 내가 Prototype에서 jQuery로 옮긴 이유 (0) | 2010.12.09 |
| [펌] 자바스크립트로 각 form의 element(요소)에 접근 방법 (0) | 2010.07.05 |
| [Javascript] 정규식을 이용한 html 태그 제거 함수 (0) | 2009.06.30 |
| [Javascript] 태그 삭제 정규식 (0) | 2009.06.29 |
Very well done! You are a true thinker, keep up the good work!
Nadav, August 17th, 2010seems that it works in firefox too
l4u, August 17th, 2010@l4u – Firefox appears to work but what it’s really doing is creating a shortcut to the anchor link where ever you drag it out to on windows. Not sure what it does on other OS platforms.
The Css Ninja, August 18th, 2010Nice, this is pretty cool. I hate that damn save file dialog box.
Jared, August 21st, 2010I didn’t even know you could do that in gmail.
Great work, thanks! A quick test shows this also works for Data URLs, which thus offers an easy way to download client-generated files. Awesome!
Alexis Deveria, August 26th, 2010@Alexis – Nice, the canvas image editors could benefit from that.
The Css Ninja, August 27th, 2010On firefox on ubuntu it works, and it downloads the file to the desktop. (nautilus does the download job, not the browser)
Jonathan Schemoul, August 29th, 2010