Как создать измененную копию объекта File в JavaScript?

Свойства файлов, полученных из <input type="file">, доступны только для чтения.

Например, следующая попытка перезаписать file.name либо сработает молча, либо отбросит 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';
}

Попытка создать копию с помощью Object.assign({}, file) завершается с ошибкой (создает пустой объект).

Итак, как клонировать объект File?

Ответы

Ответ 1

Мое решение лежит в конструкторе File:

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

Какая из них является расширением 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 });
}

Обратите внимание, что первым аргументом File() должен быть массив, а не только исходный файл.

Ответ 2

Вы можете использовать FormData.prototype.append(), который также преобразует объект Blob в объект File.

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

Ответ 3

Более кросс-браузерное решение

Принятый ответ также работает для меня в современных браузерах, но, к сожалению, он не работает в IE11, поскольку IE11 не поддерживает конструктор File. Однако IE11 поддерживает конструктор Blob поэтому его можно использовать как альтернативу.

Например:

var newFile  = new Blob([originalFile], {type: originalFile.type});
newFile.name = 'copy-of-'+originalFile.name;
newFile.lastModifiedDate = originalFile.lastModifiedDate;

Источник: MSDN - Как создать экземпляр файла, используя файловый API HTML 5?