Javscript upload rename file on upload with ajax and php

Question

This question has been asked many times, but I can't find the right answer.

I'm trying to upload a file with javascript, ajax and php. Which works so far. However, I would like to rename the file when uploading and in javascript, so that I can determine the name of the file from there.

my function to upload the file via ajax in javascript

async function uploadFile() {
  let formData = new FormData();           
  formData.append("file", fImage.files[0]);
  await fetch('/upload.php', {
    method: "POST", 
    body: formData
  });    
  alert('The file has been uploaded successfully.');
}

my input field in html

<input class="form-control" type="file" id="fImage">

my upload.php

<?php

/* Get the name of the uploaded file */
$filename = $_FILES['file']['name'];

/* Choose where to save the uploaded file */
$location = "upload/".$filename;

/* Save the uploaded file to the local filesystem */
if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
  echo 'Success'; 
} else { 
  echo 'Failure'; 
}

?>

The aim would be to determine the file name via javascript, e.g. via a variable

apple apple · Accepted Answer · 2022-09-04 15:28:19Z

1

you can use the 3rd parameter of append to specify the filename (MDN)

formData.append("file", fImage.files[0], new_name);

answered Sep 4, 2022 at 15:28

apple apple

10.7k2 gold badges20 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javscript upload rename file on upload with ajax and php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related