I use this code to modify input type="file" file name.
html:
<input type="file" id="videoUpload"/>
js:
var fileName = $("#videoUpload").prop("files")[0].name;
console.log(a) //testA.mp4
$("#videoUpload").prop(("files")[0].name,"myVideo.mp4")
console.log(a) //testA.mp4
The file name is not changed,why?
What you could do is before the form is submitted, copy the file, rename it and replace it. (assuming your input has name=inputName)
yourFormElement.addEventListener("formdata", ({formData}) => {
const file = formData.inputName.files[0];
const blob = new Blob([file],{type: file.type});
const file2 = new File([blob], "foo.bar", {type: blob.type});
formData.set("inputName", [file2]);
});
But as Quentin said, this is something that you usually have to do on the server because anyone can open the devtools do the changes from above and override other users files on the server.