CODEWITHSUNDEEP
javascriptreactjs
ffxsam
ffxsam

Reputation: 27713

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/

Upvotes: 14

Views: 1932

Answers (4)

guest271314
guest271314

Reputation: 1

You can use the .innerHTML of an <a> element to set the name of linked file

<div class="container">
  <h1>Drag out any of these links to your dekstop</h1>
  <a href="file.txt" id="dragout" class="dragme" draggable="true">file.txt</a>    
</div>

where file.txt is a local file dragged into file manager at *nix os which creates a Link to file.txt.

plnkr http://plnkr.co/edit/pif0ZraAn9RbJI8w2z0w?p=preview

See also Drag File in Data URI format from Browser to Desktop

Upvotes: 0

ffxsam
ffxsam

Reputation: 27713

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.

Upvotes: 2

Sandip Tajne
Sandip Tajne

Reputation: 57

You can write 

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

Upvotes: -3

Kaiido
Kaiido

Reputation: 136608

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

Upvotes: 2

Related Questions