HTML-перетаскивание - как установить имя файла * исходящего * перетаскивания (на рабочий стол)

Я пытаюсь сделать так, чтобы пользователь мог перетаскивать значок из веб-браузера на свой рабочий стол, и создается текстовый файл. У меня часть контента опущена, но я не могу понять, как установить имя файла. Я пробовал мутировать dataTransfer.files, но это только для чтения. Я не уверен, как это достичь.

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/

Ответ 1

В соответствии с этой страница MDN _{(выделение мое)}

Локальный файл перетаскивается с использованием типа application/x-moz-file со значением данных, которое является объектом nsIFile. Непривилегированные веб-страницы не могут извлекать или изменять данные этого типа.

Итак, если вы не пишете расширение для браузера, вы не можете и получите Security Error.

Что происходит, когда вы перетаскиваете некоторые данные на Рабочий стол до вашей ОС (моя конвертирует его в формат файла .textClipping).

Ответ 2

Argh! Ниже в Chrome работает отлично:

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

Хотя не в Safari и Firefox. Какой огромный облом.

Ответ 3

Вы можете использовать .innerHTML элемента <a> для установки имени связанного файла

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

где file.txt - локальный файл, перетаскиваемый в файловый менеджер в * nix os, который создает Link to file.txt.

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

См. также Перетащите файл в формате URI данных из браузера на рабочий стол

Ответ 4

Вы можете написать

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