title: Google Chrome Drag to desktop: Custom 'File' Names
body: <p>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".</p>
  
  <p>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 :)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
          &lt;script&gt;
  
              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);
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>