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

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/

3 Answers

Answers 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).

Answers 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.

Answers 3

You can write

event.dataTransfer.setData = ('text', 'tmp.txt'); 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati