I want to change the .name of an uploaded filein Vue.js - html

Question

So I have this file input where the user selects an image. But once I have this image, I want to change ONLY the name, so for example, user uploads "wallpaper_hd_dragonball_z.jpg" and I want it to be named "wallpaper.jpg". This is the input:
<input type="file" #change="uploadImage($event,userDetails.email)">
And this is the function it calls to store the image in the database:
uploadImage(e, email){
this.selectedFile = e.target.files[0];
console.log(this.selectedFile.name);
var storageRef = firebaseApp.storage().ref(`profilePics/${email}/${this.selectedFile.name}`);
const task = storageRef.put(this.selectedFile);
task.on('state_changed',snapshot=>{
let percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
this.uploadValue = percentage;
}, error=>{console.log(error.message)},
()=>{this.uploadValue=100;
task.snapshot.ref.getDownloadURL().then((url)=>{
this.picture = url;
console.log(this.picture);
})
})
}
Basically what I'm trying is:
this.selectedFile.name = "profPic.jpg";
console.log(this.selectedFile.name);
But it doesn't work. I've looked around google and I can't find how to do it.

Answer 1

You don't have to change the name of the file you have in memory, because the name property of a File object is read-only.
Instead, just rename the file you will save in Firebase Storage.
function getFileExtension(fileName) {
return filename.split('.').pop();
}
//...
const fileExtension = getFileExtension(this.selectedFile.name);
var storageRef = firebaseApp.storage().ref(`profilePics/${email}/wallpaper.${fileExtension}`);
storageRef.put(this.selectedFile);
// ...
Or create a new file object, with another name.
const myNewFile = new File([this.selectedFile], 'wallpaper.png', {type: myFile.type});
firebaseApp.storage().ref(`profilePics/${email}/${myNewFile.name}`);
storageRef.put(myNewFile);
// ...