How to change name of file in javascript from input=File

Question

I need to change the filename (not the file, just the metadata of the name) when uploading to a sharepoint site.

I figured that it would be easy enough to change the html attribute in javascript rather than playing with Sharepoint backend. So that when I upload a file it changes the name of the file (not the data)

something like this:

function PreSaveAction(){
   var file = document.GetElementById('fileupload1');
   file.files[0].name='ChangedName.tmp'

return true;
}

Is this impossible due to the nature of the locked input='file' attributes?

yes you cannot change the name of a file. its a security issue — anurupr
– anurupr, Commented Feb 12, 2014 at 9:29
You cannot "locally" change the name of the file. However, when you upload, you can change the destination filename. I don't know that you use to upload, but with the CopyIntoItems webservice, just give the name you want inside <DestinationUrls></DestinationUrls>. — AymKdn
– AymKdn, Commented Feb 13, 2014 at 7:29

Alexander Taborda · Accepted Answer · 2019-11-28 13:40:57Z

58

try this:

var element = document.GetElementById('fileupload1');
var file = element.files[0];
var blob = file.slice(0, file.size, 'image/png'); 
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 Nov 28, 2019 at 13:40

answered Sep 20, 2017 at 17:03

Alexander Taborda

8168 silver badges11 bronze badges

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

1 Comment

rob_james Over a year ago

As a File object is a blob, you can just use var blob = file.files[0] to use as the blob object in [blob]. You can also just get the type from the File object too blob.type.

Glavin001 · Accepted Answer · 2020-05-25 05:18:43Z

From reading https://developer.mozilla.org/en-US/docs/Web/API/File/File#Syntax the bits parameter of the File constructor can be an array of Blob objects.

bits

An Array of ArrayBuffer, ArrayBufferView, Blob, USVString objects, or a mix of any of such objects, that will be put inside the File. USVString objects are encoded as UTF-8.

From reading https://developer.mozilla.org/en-US/docs/Web/API/File#Methods it turns out the File inherits from Blob:

The File interface doesn't define any methods, but inherits methods from the Blob interface

Therefore, new File([originalFile]) is valid.

I came up with the following which works for me:

function renameFile(originalFile, newName) {
    return new File([originalFile], newName, {
        type: originalFile.type,
        lastModified: originalFile.lastModified,
    });
}

Terry · Accepted Answer · 2019-05-28 01:36:20Z

24

A simpler and more memory efficient approach - change the file's 'name' property to writeable:

Object.defineProperty(fileToAmend, 'name', {
  writable: true,
  value: updatedFileName
});

Where fileToAmend is the File and updatedFileName is the new filename.

Method from Cannot assign to read only property 'name' of object '[object Object]'

answered May 28, 2019 at 1:36

Terry

2412 silver badges2 bronze badges

6 Comments

rob_james Over a year ago

For me, this didn't quite work. It did, and debugging looks like it all going to work, but upon saving the file in an indexedDB it retained the original name. Maybe it gets the name from within the deeper blob or something??

Bart S Over a year ago

In my case, I just wanted to rename before uploading so the new name would show up in the AWS S3 interface, and this worked perfectly. Thanks!

Wakas Abbasid Over a year ago

It didn't work for me. I too wanted to change the filename before uploading to AWS S3. But every time file name was not updated.

bob Over a year ago

@WakasAbbasid I'm on the same boat, gave up renaming filename, but chose to provide a destination filename when uploading.

Wakas Abbasid Over a year ago

@bob i got around to it using the method provided by @Glavin001 const renameFile = (originalFile, newName) => { return new File([originalFile], newName, { type: originalFile.type, lastModified: originalFile.lastModified, }); }; Before uploading file create a new object and save the response from renameFile into it Sorry for bad formatting.

|

rhemmuuu · Accepted Answer · 2022-12-15 10:03:14Z

3

You can change the name by using FormData

let file = document.GetElementById('fileupload1');
let newName = "ChangedName.tmp"
let formData = new FormData();
formData.append('file', file, newName);

answered Dec 15, 2022 at 10:03

rhemmuuu

1,2092 gold badges7 silver badges21 bronze badges

Comments

a cat · Accepted Answer · 2023-01-10 00:08:08Z

0

You can use the formdata event to modify the file name. This event fires when a form is submitted or manually serialized, and any changes made to the data will be used by the browser (i.e. in a normal form submission).

Technically you can't change the file name, but you can remove the file and then re-add it with a new name like this:

yourForm.addEventListener("formdata", ({ formData }) => {
    const file = formData.get("fileupload");
    formData.delete("fileupload");
    formData.append("fileupload", file, "ChangedName.tmp");
});

answered Jan 10, 2023 at 0:08

a cat

9241 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to change name of file in javascript from input=File

5 Answers 5

1 Comment

Comments

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related