web-dev-qa-db-fra.com

Renommer un objet File () en JavaScript

J'aimerais que mes utilisateurs puissent renommer un fichier avant de le télécharger.

J'ai un objet File en Javascript qui a une propriété name qui est déjà définie, mais j'aimerais que cela puisse être mis à jour. En ce moment, faire l'évidence myFile.name = "new-name.txt" renvoie une erreur indiquant que cette propriété est en lecture seule.

Quelle est la meilleure façon de modifier la propriété name sur un objet JavaScript File?

17
CBarr

Vous pouvez ajouter une balise input avec le nom dessus et masquer la propriété name à l'utilisateur. Sur le serveur, utilisez simplement input comme nom et ignorez le nom par défaut.

3
beautifulcoder

Maintenant que file.name est une propriété en lecture seule, j'ai trouvé que c'était la meilleure méthode pour renommer un objet File dans le navigateur:

const myNewFile = new File([myFile], 'new_name.png', {type: myFile.type});
29
PaulMest

essaye ça:

var blob = file.slice(0, file.size, 'image/png'); 
var newFile = new File([blob], 'name.png', {type: 'image/png'});

remarque: c'est pour un type d'image, vous devez changer ce type avec le type que vous utilisez réellement.

10
Alexander Taborda

En réponse à la réponse d'Alexander Taborda ... Les premier et deuxième paramètres de Blob.slice () sont les octets de début et de fin du blob d'origine qui devraient former le nouveau blob. En disant:

var blob = file.slice(0,-1);

vous ne dites pas "copier à la fin du fichier" (c'est ce que je pense être votre but), vous dites "copier la totalité du blob sauf le dernier octet".

Comme le dit @carestad

var blob = file.slice(0, file.size);

suivi de la création d'un nouvel objet File () devrait créer une copie exacte avec un nouveau nom.

Notez qu'avec un png, le fichier sera considéré comme invalide sans l'octet final.

De: https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice

2
Andrew Chart

Vous pouvez utiliser

FileSystemEntry.moveTo(newParent[, newName][, successCallback][, errorCallback]);

pour renommer un fichier ou un répertoire.

C'est de MDN: https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry/moveTo

0
裴雨墨