trascinamento HTML/drop - come impostare il nome del file di un * in uscita * trascinamento (per desktop)

Question

Sto cercando di fare in modo che un utente può trascinare un'icona dal browser web al proprio desktop, e un file di testo è creato. Ho la parte del contenuto verso il basso, ma non riesco a capire come impostare il nome del file. Ho provato a cambiare il codice dataTransfer.files ma è di sola lettura. Non sono sicuro di come farlo.

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

È possibile scrivere

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

Answer 2

Secondo questa MDN page _{(sottolineatura mia)}

un file locale viene trascinato utilizzando il tipo application/x-moz-file con un data valore che è uno nsIFile oggetto. Le pagine Web non privilegiate non sono in grado di recuperare o modificare i dati di questo tipo.

Quindi, se non si sta scrivendo un estensione del browser, non è possibile, e riceveranno un Security Error.

Ciò che accade quando si trascinano alcuni dati sul desktop dipende dal sistema operativo in uso (la mia converte in alcuni formati di file .textClipping).

Answer 3

Argh! Di seguito funziona bene in Chrome:

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

Anche se non in Safari o Firefox. Che enorme seccatura.

Answer 4

È possibile utilizzare il .innerHTML di un elemento <a> per impostare il nome del file collegato

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

dove file.txt è un file locale trascinato in file manager a * nix OS che crea un Link to file.txt.

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

Vedi anche Drag File in Data URI format from Browser to Desktop