How to create a modified copy of a File object in JavaScript?
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.
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");
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?