Estoy tratando de cargar un archivo pero no entiendo cómo puedo cambiar el nombre del archivo antes de cargarlo.

parte html

 <form class="float-sm-right"method="POST" enctype="multipart/form-data" id="fileUploadForm"> <div class="uploadbutton"><input class="hide_file" id="myfilefield" onchange="this.form.submit()" type="file" name="files" multiple>Upload</div> </form>

parte del guión

 document.getElementById('myfilefield').onchange = function() { event.preventDefault(); var form = $('#fileUploadForm')[0]; var data = new FormData(form); $("#btnSubmit").prop("disabled", true); $.ajax({ type: "POST", enctype: 'multipart/form-data', url: "<?= Pterodactyl::serverUploadFile();?>", data: data, processData: false, contentType: false, cache: false, timeout: 600000, success: function (data) { $("#result").text(data); console.log("SUCCESS : ", data); $("#btnSubmit").prop("disabled", false); window.location.reload(); }, error: function (e) { $("#result").text(e.responseText); console.log("ERROR : ", e); $("#btnSubmit").prop("disabled", false); } }); };

No entiendo cómo puedo cambiar el nombre del archivo antes de cargarlo.