Comment donner un nom de fichier à un Blob téléchargé en tant que FormData ?

Question

Je télécharge actuellement des images collées depuis le presse-papiers avec le code suivant :

 // Turns out getAsFile will return a blob, not a file
var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();
form.append("blob",blob);
request.open(
            "POST",
            "/upload",
            true
        );
request.send(form);

Il s'avère que le champ de formulaire téléchargé reçoit un nom similaire à celui-ci : Blob157fce71535b4f93ba92ac6053d81e3a

Existe-t-il un moyen de définir ceci ou de recevoir ce nom de fichier côté client, sans effectuer de communication côté serveur ?

Answer 1

Pour Chrome, Safari et Firefox, utilisez simplement ceci :

 form.append("blob", blob, filename);

(voir documentation MDN )

Answer 2

Ajouter ceci ici car il ne semble pas être ici.

En plus de l'excellente solution de form.append("blob",blob, filename); vous pouvez également transformer le blob en une instance de File

 var blob = new Blob([JSON.stringify([0,1,2])], {type : 'application/json'});
var fileOfBlob = new File([blob], 'aFileName.json');
form.append("upload", fileOfBlob);

Answer 3

Étant donné que vous obtenez les données collées dans le presse-papiers, il n'existe aucun moyen fiable de connaître l'origine du fichier et ses propriétés (y compris le nom).

Votre meilleur pari est de créer votre propre schéma de nommage des fichiers et de l'envoyer avec le blob.

 form.append("filename",getFileName());
form.append("blob",blob);

function getFileName() {
 // logic to generate file names
}

Answer 4

Ce nom semble dérivé d'un GUID d'URL d'objet. Procédez comme suit pour obtenir l'URL de l'objet dont le nom est dérivé.

 var URL = self.URL || self.webkitURL || self;
var object_url = URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);

object_url sera formaté en blob:{origin}{GUID} dans Google Chrome et moz-filedata:{GUID} dans Firefox. Une origine est le protocole+hôte+port non standard pour le protocole. Par exemple, blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743 ou blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99 . Vous voudrez probablement extraire le GUID et supprimer tous les tirets.

Answer 5

Je ne l'ai pas testé, mais cela devrait alerter l'URL de données des blobs :

 var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();

var reader = new FileReader();
reader.onload = function(event) {
  alert(event.target.result); // <-- data url
};
reader.readAsDataURL(blob);