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.