HTML drag / drop - wie man den Dateinamen eines * ausgehenden * Drag (auf den Desktop) setzt

Ich versuche es so zu gestalten, dass ein Benutzer ein Symbol vom Webbrowser auf seinen Desktop ziehen kann und eine Textdatei erstellt wird. Ich habe den Inhaltsteil heruntergefahren, kann aber nicht herausfinden, wie der Dateiname festgelegt wird. Ich habe versucht, @ zu mutierdataTransfer.files aber das ist nur lesbar. Ich bin mir nicht sicher, wie ich das erreichen soll.

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