How to create a modified copy of a File object in JavaScript?

Question

Properties of files received from an are read-only.

For example, the following attempt to re-write file.name w

Answer 1

A more cross browser solution

The accepted answer works for me too in modern browsers, but unfortunately it does not work in IE11, since IE11 does not support the File constructor. However, IE11 does support the Blob constructor so it can be used as an alternative.

For example:

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

Source: MSDN - How to create a file instannce using HTML 5 file API?

Answer 2

My solution lay in the File constructor:

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

Which itself is an extension of 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 });
}

Note the first argument to File() must be an array, not simply the original file.

Answer 3

You can use FormData.prototype.append(), which also converts a Blob to a File object.

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