using this mark up and script I can create “drag file to desktop” links for Google Chrome 8.0.552.237 OSX (yay!). My issue us that I cannot specify the name of the dynamically created script file- Google Chrome ALWAYS calls it “download.js” even though I have specified it should be called “customFileName.js”.
Can anyone give me some guidance? Is this a bug, or am I doing something wrong? I know dynamically creating binary files in the browser is probably the wrong side of the bleeding edge and I should be happy that it works at all, but being able to name the files would be of a lot of use to the particular application that I’m building. Source code is commented- thanks in advance 🙂
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var mimeType= 'text/javascript'
, javaScript= 'alert("hello");'
// convert javascript to binary string
, binaryText= btoa(javaScript)
// create data uri
, dataUri= "data:text/javascript;charset=utf-8;base64," + binaryText
// a conventional http url pointing to an image
, resourceUri= 'http://www.chromium.org/_/rsrc/1220198801738/'
+ 'config/app/images/customLogo/customLogo.gif?revision=2'
// drag this link to your desktop or other folder and
// Google Chrome will download a file to that location
// called "download.js" - it should be called "customFileName.js"
, draggableScriptAnchor= document.createElement('a')
// drag this link to your desktop or other folder and
// Google Chrome will download a file to that location
// called "customFileName.gif" as expected
, draggableResourceAnchor=document.createElement('a')
// setup drag to desktop
// set this anchors href to the data uri
draggableScriptAnchor.href= dataUri;
draggableScriptAnchor.innerText= 'Drag dynamic script';
// listen for drag events
draggableScriptAnchor.addEventListener
(
'dragstart'
, function (mouseEvent)
{
mouseEvent.dataTransfer.setData
(
"DownloadURL"
// note that the convention for this string is
// mimetype:filename:url and that the "file"
// is given the name "customFileName.js"
, "text/javascript:customFileName.js:" + dataUri
)
}
, false
);
// set this anchors href to a conventional http url
draggableResourceAnchor.href= resourceUri
draggableResourceAnchor.innerText= "Drag image";
// listen for drag events
draggableResourceAnchor.addEventListener
(
'dragstart'
, function (mouseEvent)
{
mouseEvent.dataTransfer.setData
(
"DownloadURL"
// as above, except that this time the mimetype
// is image/gif and the file name is customFileName.gif
// THIS WORKS AS EXPECTED
, "image/gif:customFileName.gif:" + resourceUri
)
}
)
// add elements to the DOM
document.body.appendChild(draggableScriptAnchor);
document.body.appendChild(document.createElement('br'));
document.body.appendChild(draggableResourceAnchor);
</script>
</body>
</html>
It seems to be a bug in Chrome. The issue “Drag and drop of ‘DownloadURL’ type ignores specified filename for data URLs” has been fixed recently, should probably be fixed in Chrome version 13.
If someone wants to test, check this live example.