CODEWITHSUNDEEP
reactjssymfonysymfony4
Grégory C
Grégory C

Reputation: 429

Upload multiple files to Symfony Backend manually (without form)

I'm facing an issue trying to send multiples files from a ReactJS App to a Symfony Backend.

I upload two files but only one is visible in my Symfony backend.

Data are sent from a ReactJS dropzone, I well checked that the two files are sent via formData, I well used the 'content-type': 'multipart/form-data' to post the data.

In Chrome Newtwork Tab, the Form Data details shows that two files are well attached to the request :

------WebKitFormBoundaryTif9sihCtI30UXXS Content-Disposition: form-data; name="file"; filename="glacier-583419_960_720.jpg" Content-Type: image/jpeg

------WebKitFormBoundaryTif9sihCtI30UXXS Content-Disposition: form-data; name="file"; filename="image-ile.jpg" Content-Type: image/jpeg

Nevertheless, in my Symfony backend the File Parameter Bag only shows one file :

return $request->files;

Serialized response :

{
    "parameters": {
        "file": {
            "test": false,
            "original_name": "glacier-583419_960_720.jpg",
            "mime_type": "image/jpeg",
            "error": 0
        }
    },
    "file_keys": [
        "error",
        "name",
        "size",
        "tmp_name",
        "type"
    ]
}

As you can see, in "parameters", only one file is present instead of two.

Is anybody already encountered this problem ? I don't have any idea of what could be the issue ?

Upvotes: 0

Views: 994

Answers (1)

Grégory C
Grégory C

Reputation: 429

I solved my issue, it was trivial but it could help someone else for future readings.

As per indicated in the Form Data sent :

------WebKitFormBoundaryTif9sihCtI30UXXS Content-Disposition: form-data; name="file"; filename="glacier-583419_960_720.jpg" Content-Type: image/jpeg

------WebKitFormBoundaryTif9sihCtI30UXXS Content-Disposition: form-data; name="file"; filename="image-ile.jpg" Content-Type: image/jpeg

Each element added in the Form Data had the same name value. Here is the problem :

var tempFormData = new FormData();
setFormData(acceptedFiles.map((file)=>{
   tempFormData.append('file', file);
}));

Corrected code :

var tempFormData = new FormData();
setFormData(acceptedFiles.map((file)=>{
   tempFormData.append(file.name, file);
}));

So the error was not coming from Symfony but from front-end App not well formatting the data sent.

Upvotes: 1

Related Questions