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

Я пытаюсь сделать так, чтобы пользователь мог перетащить значок из веб-браузера на рабочий стол и создать текстовый файл. У меня есть часть контента, но я не могу понять, как установить имя файла. Я пытался мутировать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/

 ffxsam12 июн. 2016 г., 02:09
@ guest271314 Пожалуйста, опубликуйте ответ как можно скорее (период вознаграждения подходит к концу) - ваша ссылка (вторая) - это то, что указало мне правильное направление, чтобы хотя бы заставить его работать в Chrome.
 The Bumpaster11 июн. 2016 г., 23:56
Вы рассматривали возможность использования put_file_contents или fwrite & fopen? Вы можете написать скрипт на PHP и вызвать его с помощью AJAX, потому что javascript не имеет ничего общего с локальными или серверными файлами (он не дружествен к стороне сервера)
 ffxsam11 июн. 2016 г., 23:57
@TheBumpaster Это звучит как серверный код.
 guest27131408 июн. 2016 г., 05:32
"У меня есть часть контента вниз" Можете ли вы создать Stacksnippets или PLNKRplnkr.co показывать?
 ffxsam08 июн. 2016 г., 09:10
@ guest271314 Приведенный выше код делает именно это (перетаскивание на рабочий стол, файл создан). Я добавлю ссылку Plunker.
 guest27131408 июн. 2016 г., 15:43
Файл в plnkr не создается путем перетаскивания на рабочий стол, только если перетаскивание элемента из plnkr в файловый менеджерссылка на сайт в файл создан; увидетьstackoverflow.com/questions/5416748/..., Хотя используя этот подходstackoverflow.com/questions/29343897/... Вы можете установить ссылку на имя файла, установив.innerHTML например<a> элемент, который перетаскивается в файловый менеджер.

Ответы на вопрос(4)

Согласно этомуСтраница MDN (акцент мой)

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

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

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

Вы можете использовать.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.

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

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

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

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

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

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

event.dataTransfer.setData = ('text', 'tmp.txt');
 ffxsam12 июн. 2016 г., 08:03
Не обижайся на него, но я думаю, что Сандип должен изучить JavaScript. ;)
 ffxsam13 июн. 2016 г., 09:28
Конечно.event.dataTransfer.setData это метод. Вы устанавливаете метод равным чему-то другому (кстати, это, кстати, допустимый синтаксис JS, но я никогда не видел его раньше).
 The Bumpaster12 июн. 2016 г., 00:05
Вы могли бы объяснить, что вы имеете в виду ...
 Sandip Tajne13 июн. 2016 г., 05:52
@ffxsam: пожалуйста, дайте мне знать, что в этом плохого, чтобы я мог исправить свою ошибку.

Ваш ответ на вопрос