14

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/

ffxsam
  • 26,428
  • 32
  • 94
  • 144
  • _"I've got the content part down"_ Can you create a stacksnippets or plnkr http://plnkr.co to demonstrate? – guest271314 Jun 08 '16 at 03:32
  • @guest271314 The code above does exactly that (drag/drop to desktop, a file is created). I'll add a Plunker link. – ffxsam Jun 08 '16 at 07:10
  • 1
    No file is created here at plnkr by dragging to desktop, only when dragging element at plnkr to a file manager is a _link_ to file created; see http://stackoverflow.com/questions/5416748/drag-a-file-from-browser-to-desktop?rq=1#comment53385290_5416795. Though using this approach http://stackoverflow.com/questions/29343897/drag-file-in-data-uri-format-from-browser-to-desktop you can set the link to file name by setting `.innerHTML` of for example an `` element that is dragged to file manager. – guest271314 Jun 08 '16 at 13:43
  • Have you considered using put_file_contents or fwrite & fopen ? You can write a script in PHP and call it using AJAX because javascript has nothing to do with local or server files( its not server side friendly ) – The Bumpaster Jun 11 '16 at 21:56
  • 1
    @TheBumpaster That sounds like server-side code. – ffxsam Jun 11 '16 at 21:57
  • @guest271314 Please post an answer ASAP (the bounty period is about to end) - your link (the second one) is what pointed me in the right direction to at least get it working in Chrome. – ffxsam Jun 12 '16 at 00:09

4 Answers4

2

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

Kaiido
  • 123,334
  • 13
  • 219
  • 285
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.

ffxsam
  • 26,428
  • 32
  • 94
  • 144
0

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

Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177
-3

You can write 

event.dataTransfer.setData = ('text', 'tmp.txt');
John Weisz
  • 30,137
  • 13
  • 89
  • 132
Sandip Tajne
  • 57
  • 8
  • No offense to him, but I think Sandip needs to learn JavaScript. ;) – ffxsam Jun 12 '16 at 06:03
  • @ffxsam : can you please let me know what is wrong in that so I can correct my mistake. – Sandip Tajne Jun 13 '16 at 03:52
  • 1
    Sure. `event.dataTransfer.setData` is a method. You’re setting a method to equal something else (which, BTW, is apparently valid JS syntax, but I’ve never seen it before). – ffxsam Jun 13 '16 at 07:28