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, Feb 12 '14 at 09: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 ``. — AymKdn, Feb 13 '14 at 07:29

Alexander Taborda · Answer 1 · 2019-11-28T13:40:57.930

53

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 '19 at 13:40

answered Sep 20 '17 at 17:03

Alexander Taborda

736
7
11

12

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`. – rob_james Jul 05 '19 at 10:01

score 30 · Answer 2 · answered May 25 '20 at 05:18

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,
    });
}

score 24 · Answer 3 · answered May 28 '19 at 01:36

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 '19 at 01:36

Terry

241
2
2

9

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?? – rob_james Jul 05 '19 at 09:58
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! – Bart S Nov 13 '20 at 17:33
1

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. – Wakas Abbasid Mar 04 '21 at 17:56
@WakasAbbasid I'm on the same boat, gave up renaming filename, but chose to provide a destination filename when uploading. – bob Mar 24 '21 at 00:44
@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. – Wakas Abbasid Mar 24 '21 at 10:41
This worked great for me. It is odd though that it seems to only work in certain scenarios. – Quiver May 16 '23 at 17:25

score 2 · Answer 4 · answered Dec 15 '22 at 10:03

2

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 '22 at 10:03

rhemmuuu

1,147
2
5
19

score 0 · Answer 5 · answered Jan 10 '23 at 00:08

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

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

5 Answers5

Linked