ruta - read file javascript

¿Cómo crear una copia modificada de un objeto File en JavaScript?

Question

Las propiedades de los archivos recibidos de un <input type="file"> son de solo lectura.

Por ejemplo, el siguiente intento de volver a escribir file.name fallará silenciosamente o arrojará TypeError: Cannot assign to read only property ''name'' of object ''#<File>'' .

<input onchange="onchange" type="file">

onchange = (event) => {
    const file = event.target.files[0];
    file.name = ''foo'';
}

Intentar crear una copia mediante Object.assign({}, file) falla (crea un objeto vacío).

Entonces, ¿cómo se clona un objeto File ?

Answer 1

Mi solución estaba en el constructor de File :

https://developer.mozilla.org/en-US/docs/Web/API/File#Implementation_notes

Que en sí es una extensión de Blob :

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

let file = event.target.files[0];
if (this.props.distro) {
    const name = ''new-name-here'' + // Concat with file extension.
        file.name.substring(file.name.lastIndexOf(''.''));
    // Instantiate copy of file, giving it new name.
    file = new File([file], name, { type: file.type });
}

Tenga en cuenta que el primer argumento para File() debe ser una matriz, no simplemente el archivo original.

Answer 2

Puede usar FormData.prototype.append() , que también convierte un Blob en un objeto File .

let file = event.target.files[0];
let data = new FormData();
data.append("file", file, file.name);
let _file = data.get("file");