27. August 2010 / by Georg Leciejewski

jQuery dragout plugin to drag files from browser onto desktop

google chrome logoDownloading files from a browser requires to go through that nerving save dialog and searching the file afterwards. Google has put up a nice method(in gmail) through which you can simply drag a file-link onto your desktop to download it.

Inspired by a blogpost of the css-ninja which i stumbled upon at ajaxian.com, i quickly hacked this jQuery plugin – “dragout”, which will also be available in SalesKing with the next deploy.

/**
* Download a file by dragging it out of the browser.
* Currently only supported by google chrome browser
* @example
* <a class="dragout"
* data-downloadurl="application/pdf:saleking-invoice.pdf:http://salesking.eu"
* href="http://some-url.de"
* salesking-invoice.pdf
* $('.downdrag').dragout();
*
* The important part:
* data-downloadurl="application/pdf:saleking-invoice.pdf:http://salesking.eu"
* data-downloadurl="mime-type:filename:file-url"
*/

(function($) {
$.fn.extend({

dragout : function () {
var files = this;
if(files.length > 0) {
var use_data = (typeof files[0].dataset === "undefined") ? false : true;
$(files).each(function() {
var url = use_data ? this.dataset.downloadurl : this.getAttribute("data-downloadurl");
this.addEventListener("dragstart",function(e){
e.dataTransfer.setData("DownloadURL",url);
},false);
});
}
}
});
})(jQuery);

Be aware that this only works in google chrome and firefox beta 4 by now.
UPDATE:
check it out on Github: http://github.com/salesking/jquery-dragout

2 Kommentare zu “jQuery dragout plugin to drag files from browser onto desktop

  1. Since we’re talking about jQuery dragout plugin to download files by dragging | SalesKing Developer Blog, If text is used as navigation, it should be concise. Visual metaphors should not be re-invented. If hyperlinks are used, then they should stand out from the body of the text. Dead links should have no place on any web page whatsoever. This increases user confusion and wastes time. And one that is even just as worse is having a link on the homepage that links to the homepage.

  2. This is awesome work! I made changes to it:

    (function($) {
    $.fn.extend({
    dragout : function () {
    var files = this;
    if(files.length > 0) {
    $(files).each(function() {
    var url = (this.dataset && this.dataset.downloadurl) || this.getAttribute(“data-downloadurl”);
    if (this.addEventListener)
    {
    this.addEventListener(“dragstart”,function(e){
    if (e.dataTransfer && e.dataTransfer.constructor == Clipboard && e.dataTransfer.setData(‘DownloadURL’,'http://www.google.com’))
    {
    e.dataTransfer.setData(“DownloadURL”,url);
    }
    },false);
    }
    });
    }
    }
    });
    })(jQuery);

    Just some feature detection to make sure that it is Chrome, and one line less for use_data.

    Thanks for sharing!

Leave a Reply

Your email address will not be published.