HTML drag/drop - how to set the filename of an *outgoing* drag (to desktop)

Question

I'm trying to make it so a user can drag an icon from the web browser to their desktop, and a text file is created. I've got the content part down, but I can't figure out how to set the filename. I've tried mutating dataTransfer.files but that's read-only. I'm not sure how to achieve this.

class CrashReport extends React.Component {
  dragStart(event) {
    const dat = {name: 'test!', crashDate: new Date()};

    event.dataTransfer.name = 'tmp.txt'; // bad
    event.dataTransfer.setData('text/plain', JSON.stringify(dat, null, 2));
    console.log(event.dataTransfer);
  }

  render() {
    return <div draggable onDragStart={this.dragStart.bind(this)}>
      Drag This
    </div>
  }
}

http://embed.plnkr.co/ar3deFFvedcWhVfwt6c6/

Answer 1

According to this MDN page _{(emphasis mine)}

A local file is dragged using the application/x-moz-file type with a data value that is an nsIFile object. Non-privileged web pages are not able to retrieve or modify data of this type.

So, if you're not writing a browser extension, you can't, and will receive a Security Error.

What happens when you drag some data to the Desktop is up to your OS (mine converts it to some .textClipping file format).

Answer 2

Argh! The below works fine in Chrome:

const jsonData = JSON.stringify(dat);
event.dataTransfer.setData("DownloadURL", "application/json:crashdump.json:data:application/json;charset=utf-8," + jsonData);

Though not in Safari nor Firefox. What a huge bummer.