Uploading multiple files with Fetch and FormData APIs Uploading multiple files with Fetch and FormData APIs ruby-on-rails ruby-on-rails

Uploading multiple files with Fetch and FormData APIs


The solution was to change files to files[]:

// acceptedFiles are File objects coming from `react-dropzone`.function handleSubmit(acceptedFiles) {  const data = new FormData();  for (const file of acceptedFiles) {    data.append('files[]', file, file.name);  }  return fetch('https://example.com/api/upload', {    method: 'POST',    body: data,        });}


For sending multiple files i have done it a little bit different because my php api endpoint says there was only one file if i send it with formdata.append('files[]', file)

<input type="file" multiple data-sender="{{ user.hashIdentifier }}">
/** @type {HTMLInputElement} */const input = document.querySelector('input[type=file]');input.addEventListener('input', function listener(event){  if(input.files.length > 0){    const formData = new FormData();    for(let i = 0; i < input.files.lenght; i++){      formData.append(`file_${i}`, input.files[i]);    }    // my endpoint should know who sends the file    formData.append('identify', input.dataSet.sender);    sendData(formData);  } else {    console.error('no files selected');  }   });/**  * sending the formData Object with all files to the server * @param {FormData} formData  */function sendData(formData) {  const url = '/api/saveFiles';  const options = {    method: 'POST',    body: formData  };  fetch(url, options)    .fetch((response) => {      if(!response.ok) {        throw Error(response.statusText);      }      return response.json();    })    .fetch((data) => {      console.log('success', data);    })    .catch((error) => {      console.error(error);    })}

my php is a symfony project and looks like that:

/** * @param Request $request (inject symfonys http request) * @param FileService $fileService (inject my own FileService) * @returns Response (symfony http Response) */#[Route('/api/saveFiles', name: 'api_saveFiles', methods: ['POST'])]public function api_saveFiles(Request $request, FileService $fileService): Response{  $statusCode = 409; // Conflict  $result = array();    /** @var FileBag */  $fileBag = $request->files;  if($fileBag->count() > 0) {    $statusCode=200;    $result['numberOfFiles'] = $fileBag->count();    $result['keys'] = $fileBag->keys();    $result['infos'] = array();    foreach($fileBag->keys() as $key){      try {        $file = $fileBag->get($key);        $fileInfo = $fileService->saveFile($file); // saves the file and gives back some infos        $result['infos'][$fileInfo];      } catch(Exception $ex) {        // TODO: handle errors      }        }  }  return new JsonResponse($result, $statusCode);}

in the attemps i tried it with formData.append('files[]', file); php has only captured the last file.