web-dev-qa-db-fra.com

Comment donner un nom de fichier à un blob chargé en tant que FormData?

Je télécharge actuellement des images collées dans 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 aucune communication côté serveur?

javascriptdomgoogle-chromeform-data
57
jontro

Pour Chrome et Firefox, utilisez simplement ceci:

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

(voir documentation MDN )

122
Chiguireitor

Ajoutant ceci ici car cela 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);
25
Noitidart

Comme les données sont 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 son nom).

Votre meilleur pari est de créer votre propre système de nom de fichier et de l’envoyer avec le blob.

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

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

Je ne l'ai pas testé, mais cela devrait alerter l'URL des données de 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);
1
JochenJung

Cela dépend vraiment de la manière dont le serveur de l'autre côté est configuré et avec quels modules il gère le post blob. Vous pouvez essayer de mettre le nom souhaité dans le chemin de votre message.

request.open(
    "POST",
    "/upload/myname.bmp",
    true
);
0
mbarnes

Utilisez-vous Google App Engine? Vous pouvez utiliser des cookies (créés avec JavaScript) pour maintenir une relation entre les noms de fichiers et le nom reçu du serveur.

0
Bogdacutu

Ce nom semble dérivé d'un GUID d'URL d'objet. Procédez comme suit pour obtenir l'URL de l'objet à partir duquel le nom a été dérivé.

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

object_url sera formaté comme 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 effacer les tirets.

0
Eli Grey

Lorsque vous utilisez Google Chrome, vous pouvez utiliser/abuser du Google Filesystem API À cet effet. Vous pouvez créer ici un fichier avec un nom spécifié et y écrire le contenu d'un blob. Ensuite, vous pouvez renvoyer le résultat à l'utilisateur.

Je n'ai pas encore trouvé le bon chemin pour Firefox; probablement un petit morceau de Flash comme downloadify est nécessaire pour nommer un blob.

IE10 a une fonction msSaveBlob() dans le BlobBuilder.

Peut-être que c'est plus pour télécharger un blob, mais c'est lié.

0
Gijs Molenaar