Empty $request->request and $request->files with multipart/form-data - php

Question

I am trying to upload a form with a file to my server using AJAX, but Symfony doesn't parse the request body like it should. This is my PHP:
#[Route('/api/upload/file', name: "api_upload_file", methods: ['POST'])]
public function create(Request $request): JsonResponse
{
dump($request->files->all());
dump($request->request->all());
dump($request->getContent());
...
and the dump output (The file part is cut out because it takes a lot of space) :
[]
[]
"""
------WebKitFormBoundaryh4t0I09h9iTRNGme
Content-Disposition: form-data; name="subcategory"
1
------WebKitFormBoundaryh4t0I09h9iTRNGme
Content-Disposition: form-data; name="main_image"; filename=""
Content-Type: application/octet-stream
------WebKitFormBoundaryh4t0I09h9iTRNGme
Content-Disposition: form-data; name="more_images"; filename=""
Content-Type: application/octet-stream
------WebKitFormBoundaryh4t0I09h9iTRNGme
Content-Disposition: form-data; name="original_version"
------WebKitFormBoundaryh4t0I09h9iTRNGme
Content-Disposition: form-data; name="version"
------WebKitFormBoundaryh4t0I09h9iTRNGme
Content-Disposition: form-data; name="original_title"
------WebKitFormBoundaryh4t0I09h9iTRNGme
Content-Disposition: form-data; name="title"
"""
The request clearly gets through so I do not understand why the content is not parsed
Just in case, here is the javascript part : (This looks like JQuery but is not)
form.submit(e => {
e.preventDefault();
let formData = createItemForm.formData();
$.ajax('/api/upload/file', {
headers: {
'Content-Type': 'multipart/form-data'
},
body: formData
})
.then(data => data.json())
.then(json => {
console.log('uploaded');
});
});
How should I do to get the files and the form values in $request->files and $request->request ?

Answer 1

DO NOT specify the Content-Type header yourself, when trying to make such a multipart request. That header needs to include the boundary value (so that the receiver will know how to parse this request) - if you specify it yourself, as just multipart/form-data, then that will be missing.
These request libraries usually know how to properly set it on their own, based on that you are passing in a FormData instance.