CODEWITHSUNDEEP
javascriptfilehtmldrag-and-drop
kreek
kreek

Reputation: 8834

HTML5: drag out a JS generated file

I have a feeling security concerns may not allow this but is it possible to generate a file with JavaScript and allow the user to drag it to the desktop (or file system)?

The following code drags out a file from a server

files[0].addEventListener("dragstart",function(evt){
    evt.dataTransfer.setData("DownloadURL", "application/octet-stream:Eadui2.ttf:http://thecssninja.come/demo/gmail_dragout/Eadui.ttf");
},false);

And with the below code I can generate a file and have it download but I can't set the file name or let the user select the location.

var uriContent = "data:application/octet-stream," + encodeURIComponent(JSON.stringify(map));
location.href = uriContent;

Ideally I'd like a magical combination of both.

Upvotes: 3

Views: 3118

Answers (3)

Andriy
Andriy

Reputation: 15472

following code is currently working in Chrome only:

// generate downloadable URL, file name here will not affect stored file
var url = URL.createObjectURL(new File([JSON.stringify(map)], 'file_name.txt'));
// note that any draggable element may be used instead of files[0]
// since JSON.stringify returns a string, we use 'text' type in setData
files[0].addEventListener("dragstart", function(evt) {
  evt.dataTransfer.setData("DownloadURL", "text:file_name.txt:" + url);
}, false);

now, dragging our files[0] element from the browser to desktop or file system, will store there a text file called, file_name.txt.

Feel free to choose another file name :)

Upvotes: 3

tungd
tungd

Reputation: 14907

This is only possible for Chrome, and even in Chrome you can't set the location. If using only Chrome is okay then you will have the following options:

  1. Stick with Drag n' Drop like from the CSS Ninja's tutorial, then you should try Ben's answer. encodeURIComponent is one way, but if you have the file generated using BlobBuilder then you can use window.webkitURL.createObjectURL() to get the file's URL. You can also try using FileWriter() with requestFileSystem(TEMPORARY, ...).

  2. Chrome supports download attribute for anchor tags so you can have regular link for the user to click (dragging also works):

    <a href="#your_url" download="filename.ext">Download</a>

  3. For cross browser support I suggest Downloadify.

Upvotes: 2

Andrew Willis
Andrew Willis

Reputation: 2349

You could try sending it to the server, saving the file, checking the return value and firing the download file function, followed by a server file that deletes the file from the server.

Something like this (with jQuery)

$.ajax({
  url: 'saveFile.php',
  method: 'post',
  data: {
     Filedata: data// file data variable
  },
  success: function(d) {
    // save file function, where d is the filename
  }
})

PHP: $filename = ;//generate filename file_put_contents($filename, $_POST['Filedata']); echo $filename;

Obviously there is more to it but that should be the basics

Upvotes: 1

Related Questions