[SOLVED] Empty $request->request and $request->files with multipart/form-data

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

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 ?

Solution

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.