Javascript Girl
  1. Javascript Girl
  3. HTML glisser / déposer – comment définir le nom de fichier d'un * sortant * glisser (vers le bureau)
Intereting Posts
Comment puis-je combiner des objets dans la bibliothèque de javascript Raphael? Comment écrire une déclaration IF en ligne en JavaScript? Comment dessiner une photo avec une orientation correcte dans un canevas après la capture de photo en utilisant la saisie dans le navigateur mobile? Le joueur caché de youtube perd ses méthodes Utilisation de modules ES6 avec traceur dans un fichier de construction unique Firefox Addon Development: Détection d'addons non compatibles? Exécutez VBScript sur le serveur à partir de javascript / php Débogage JavaScript Chrome: comment se déconnecter lorsqu'une valeur change Chargement jQuery à la volée Comment obtenir la position absolue d'un sommet en trois.js? Est-il normal que JavaScript puisse créer un DOM autrement invalide? Scripting and Programming Position de la souris sur la peinture sur toile Passer des données de Django à D3 Comment créer une balise de formulaire dynamiquement à l'aide de javascript

HTML glisser / déposer – comment définir le nom de fichier d'un * sortant * glisser (vers le bureau)

J'essaie de faire en sorte qu'un utilisateur puisse faire glisser une icône du navigateur vers son bureau et un fichier texte est créé. J'ai réduit la partie du contenu, mais je ne peux pas comprendre comment définir le nom du fichier. J'ai essayé de dataTransfer.files mais c'est en lecture seule. Je ne suis pas sûr de savoir comment y parvenir. 

 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/

Selon cette page MDN (l'accent est mis)

Un fichier local est traîné en utilisant le type de application/x-moz-file avec une valeur de données qui est un objet nsIFile . Les pages Web non privilégiées ne sont pas capables de récupérer ou de modifier des données de ce type.

Donc, si vous n'êtes pas en train d'écrire une extension de navigateur, vous ne pouvez pas, et vous recevrez une Security Error .

Ce qui se produit lorsque vous faites glisser certaines données vers le bureau correspond à votre système d'exploitation (le mien le convertit à un format de fichier .textClipping ).

Argh! Ce qui suit fonctionne bien dans Chrome: 

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

Bien que pas dans Safari ni Firefox. Quel énorme bummer.

Vous pouvez utiliser le .innerHTML d'un élément <a> pour définir le nom du fichier lié 

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

Où file.txt est un fichier local traîné dans le gestionnaire de fichiers à * nix os qui crée un Link to file.txt .

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

Voir aussi Drag File in Data URI du navigateur au bureau

Tu peux écrire 

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