Jak utworzyć zmodyfikowaną kopię obiektu File w JavaScript?

Question

Właściwości plików otrzymanych z <input type="file"> są tylko do odczytu.

Na przykład, ponowna próba przeprogramowania może zakończyć się niepowodzeniem po cichu lub rzuceniem 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'; 
} 

Próba utworzenia kopii poprzez Object.assign({}, file) nie powiedzie się (tworzy pusty obiekt).

W jaki sposób można sklonować obiekt File?

Answer 1

Moje rozwiązanie leżało w konstruktorze File:

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

który sam w sobie stanowi rozszerzenie 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 }); 
} 

Uwaga pierwszy argument File() musi być array, a nie tylko oryginalny plik.

Answer 2

Można użyć FormData.prototype.append(), który również konwertuje obiekt Blob na obiekt File.

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