CODEWITHSUNDEEP
javascripthtmlsharepoint
Michael
Michael

Reputation: 8761

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

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?

Upvotes: 42

Views: 91229

Answers (5)

a cat
a cat

Reputation: 854

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

Upvotes: 0

rhemmuuu
rhemmuuu

Reputation: 1189

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

Upvotes: 3

Glavin001
Glavin001

Reputation: 1356

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

Upvotes: 35

Alexander Taborda
Alexander Taborda

Reputation: 816

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.

Upvotes: 58

Terry
Terry

Reputation: 241

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]'

Upvotes: 24

Related Questions