Drag out file links from download control to save just like in Gmail

Google adds a lot of interesting features in it products. One of them is dragging a file link in your Gmail on to your desktop (or a folder) to download it. This article on CSS Ninja explains exactly how it is done.

We can also put this feature in our download control so that each file link can be dragged on to your folder to start download without going through save dialog.

Step 1: Identifying the file links in a download control

This is actually pretty simple. XPages by default sets the class name of the file links in download control to xspLinkFileDownload. So all you need to do is to use a simple dojo.query to find all those link and loop through them.

Step 2: Adding attributes to anchor tag

Now you need to set two attributes in the anchor tags of file links - draggable and ondragstart. The draggable attribute needs to be set to true, that's all.

Setting ondragstart requires a bit more details. You need to call event.dataTransfer.setData("DownloadURL", "application/octet-stream:<FILE NAME>:<FILE DOWNLOAD URL>"). Note that while specifying <FILE DOWNLOAD URL> make sure its the complete path start from http://. These attributes can be set using dojo.attr.

So your final JavaScript code looks something like this:

dojo.query(".xspLinkFileDownload").forEach(
    function(node, index, arr) {
        dojo.attr(node, "draggable", "true");
        dojo.attr(node, "ondragstart", "event.dataTransfer.setData('DownloadURL', 'application/octet-stream:" + node.innerText + ":" + node.href + "')");
    }
);

One limitation here is that this only works for Google Chrome. I have put this script block on XSnippets here. Just copy it from there and put it into your XPage.