HTML Ziehen/Ablegen - wie den Dateinamen eines * ausgehenden * ziehen (auf dem Desktop)

Question

Ich versuche, es so zu machen, dass ein Benutzer ein Symbol aus dem Webbrowser auf ihren Desktop ziehen kann, und eine Textdatei ist erstellt. Ich habe den Inhaltsteil unten, aber ich kann nicht herausfinden, wie man den Dateinamen einstellt. Ich habe versucht, dataTransfer.files mutieren, aber das ist schreibgeschützt. 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/

Answer 1

können Sie schreiben

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

Answer 2

Nach dieser MDN page _{(Hervorhebung von mir)}

Eine lokale Datei gezogen wird mit dem application/x-moz-file Typ mit einer Daten Wert, der eine 0 istObjekt. Nicht privilegierte Webseiten können keine Daten dieses Typs abrufen oder ändern.

Also, wenn Sie nicht eine Browser-Erweiterung zu schreiben, können Sie nicht, und wird eine Security Error erhalten.

Was passiert, wenn Sie einige Daten auf den Desktop ziehen, hängt von Ihrem Betriebssystem ab (meins konvertiert es in ein Dateiformat von .textClipping).

Answer 3

Argh! Das Folgende funktioniert gut in Chrome:

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

Obwohl nicht in Safari noch Firefox. Was für ein großer Mist.

Answer 4

Sie können die .innerHTML eines <a> Element verwenden Sie den Namen der verknüpften Datei

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

wo file.txt ist eine lokale Datei auf * nix os in Dateimanager gezogen zu setzen, die eine Link to file.txt schafft.

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

Siehe auch Drag File in Data URI format from Browser to Desktop