1

As this blog post points out, there is a way to download files via drag and drop from browser to desktop.

I want to drag a file in data uri format (e.g. "data:application/octet-stream;base64,eNcoDEdFiLEStuFf") to the desktop. I cannot provide a full URL to a server download due to security reasons (file needs to be handled clientside).

When I try what's given in the example of the blog post, a file which content and name is the current timestamp is created:

item.addEventListener("dragstart", function(evt) {
    evt.dataTransfer.setData("DownloadURL", "data:application/octet-stream;base64,eNcoDEdFiLEStuFf");
}

I already tried changing the format parameter, tweaking the format of the data a little and deconding beforehand but nothing works, I never get any of my data onto my desktop. Is there any way to accomplish what I am looking for, at least in some browsers?

By the way, we do not use jQuery. As a result, it might be interesting if there is a solution with jQuery but this will most probably not be applicable for our project.

krassdanke
  • 617
  • 6
  • 24

1 Answers1

3

As far i understood download URL should have following format: mime-type:file_name:URL. Were URL is your data URI. For your case:

item.addEventListener("dragstart", function(evt) {
    evt.dataTransfer.setData("DownloadURL", "application/octet-stream:fileName.bin:data:application/octet-stream;base64,eNcoDEdFiLEStuFf");
}

Which should create fileName.bin file.

Take a look at http://jsfiddle.net/Andrei_Yanovich/jqym7wdh/ But it looks like it works only in chrome

Andrei Yanovich
  • 56
  • 5
  • I also tried that one, did not work... created the same "timestamp-file" as the other ways – krassdanke Mar 30 '15 at 11:55
  • Okay, I re-checked your jsfiddle and my code. While this is definitely working the way you do it, it isn't in my code but that is my problem :( for everyone else encountering this: I am using an asynchronous call during dragstart and calling evt.dataTransfer.setData() in its response. It seems, that this function can only be called at the beginning of the event handler. – krassdanke Mar 30 '15 at 12:20