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

Question

Properties of files received from an <input type="file"> are read-only.

For example, the following attempt to re-write file.name would either fail silently or throw 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';
}

Attempting to create a copy via Object.assign({}, file) fails (creates an empty object).

So how does one clone a File object?

5260452 · Accepted Answer · 2016-12-07 05:26:02Z

28

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.

edited Dec 7, 2016 at 5:26

answered Dec 7, 2016 at 1:40

5260452

11.7k8 gold badges58 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guest271314 · Accepted Answer · 2016-12-07 01:54:16Z

8

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");

answered Dec 7, 2016 at 1:54

guest271314

1

Comments

Boaz · Accepted Answer · 2019-04-18 13:54:32Z

6

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?

edited Apr 18, 2019 at 13:54

answered Apr 18, 2019 at 8:01

Boaz

20.3k9 gold badges68 silver badges74 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

A more cross browser solution

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

A more cross browser solution

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related