Renaming a File() object in JavaScript

Question

I'd like for my users to be able to re-name a file before uploading it.

I have a File object in Javascript which has a name property that is already set, but i'd like for this to be able to be updated. Right now doing the obvious myFile.name = "new-name.txt" returns an error that this property is read only.

What's the best way of changing the name property on a JavaScript File object?

score 75 · Answer 1 · answered Apr 24 '18 at 22:56

75

Now that file.name is a read-only property, I've found this to be the best method to rename a File object in the browser:

const myNewFile = new File([myFile], 'new_name.png', {type: myFile.type});

answered Apr 24 '18 at 22:56

PaulMest

12,925
7
53
50

2

Clean, but `File() constructor` not supported at IE & Edge plus Opera for Android. – Meettya Dec 04 '18 at 09:58
1

Thanks. Will it duplicate the memory? or just use the pointer to the existing blob referred by original file? – software_writer Jul 25 '20 at 02:25
@AkshayKhot were you able to find this out? I would also like to know if it's duplicated in memory – Chris Lang Apr 13 '21 at 16:28
It doesn't look like it increased memory usage for me. – Chris Lang Apr 13 '21 at 16:33
@ChrisLang, yes, I think the new file just points to the existing blob, instead of duplicating it. – software_writer Apr 14 '21 at 08:22

Alexander Taborda · Answer 2 · 2018-12-05T21:08:31.153

17

try this:

var blob = file.slice(0, file.size, 'image/png'); 
var newFile = new File([blob], 'name.png', {type: 'image/png'});

note: this is for a image type, you have to change this type with type you're actually using.

edited Dec 05 '18 at 21:08

answered Sep 20 '17 at 17:08

Alexander Taborda

736
7
11

5

I would say, if you're working with a File object anyway, to use: `var blob = file.slice(0, file.size, file.type)` – carestad Feb 16 '18 at 11:24

score 5 · Accepted Answer · answered Jun 09 '15 at 14:01

5

You can add an input tag with the name on it and hide the name property from the user. On the server, just use the input as the name and ignore the default name.

answered Jun 09 '15 at 14:01

beautifulcoder

10,832
3
19
29

I already have a client side `` for the user to type the name into. Right now this actually might be the only feasible option as far as I can tell :( Still looking though... – Chris Barr Jun 09 '15 at 14:09
Yeah,,, `File` objects are immutable. Doing this seems to be the best way, I could piece together a hack to extract the file data, turn it into a `Blob` with the new name, and then turn that into a `File` but going this route is much easier. – Chris Barr Jun 09 '15 at 15:08
3

This doesn't really answer the question. You didn't say how to rename the file object or how to create copy of the object with different name. You basically said that OP should create workaround... – Michal May 22 '18 at 14:01

score 3 · Answer 4 · answered Mar 22 '18 at 20:51

In response to Alexander Taborda's answer... The first and second parameters of Blob.slice() are the start and end bytes of the original blob that should form the new blob. By saying:

var blob = file.slice(0,-1);

you are not saying "copy to the end of the file" (which is what I think is your aim), you are saying "copy the whole blob except the last byte".

As @carestad says

var blob = file.slice(0, file.size);

followed by creating a new File() object should create an exact copy with a new name.

Note that with a png, the file will be considered invalid without the final byte.

From: https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice

score 0 · Answer 5 · answered Nov 01 '19 at 06:52

0

You can use

FileSystemEntry.moveTo(newParent[, newName][, successCallback][, errorCallback]);

to rename a file or directory.

It's from MDN : https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry/moveTo

answered Nov 01 '19 at 06:52

裴雨墨

31
5

1

This is marked in MDN as both Experimental and Deprecated. Perhaps this is why this answer got no votes in a couple of years. Since JavaScript is insecure, it should not have direct access to the client file system, although there are plenty of loopholes, unfortunately. – David Spector Jun 14 '21 at 14:15

score 0 · Answer 6 · answered Nov 18 '21 at 16:08

0

Assuming f is original file object, just use spread operator, example of regexing the name:

let newF = {
        ...f,
        name: f.name.toString().replace(/[^0-9A-Za-z.\-_()]/gi, '')
      };

answered Nov 18 '21 at 16:08

Kris White

651
11
20

1

Unfortunately this doesn't work since f.name is read only. :( – dmboucher Apr 18 '22 at 22:06

Renaming a File() object in JavaScript

6 Answers6

Linked

Related