Unable to send/read data from react using FormData to Node.js server

Question

I am trying to upload a file to a node.js server and to have another payload in the same request that contains JSON.

On react side I am using this code:

    const handleSubmit = () => {
    let formData = new FormData();
    formData.append("name", testName);
    formData.append("description", testDesc);
    formData.append("testScript", '123');
    formData.append("uploadType", 'upload');
    formData.append("parameters", parameters);
    formData.append("file", file);
    const headers = {
        'Content-Type': 'multipart/form-data'
    };
    axiosInstance.post("tests/createWithFile", formData, {headers}).then(r => console.log(r)).catch(error => console.log(error))
}

On the Node.js application, I am using this code:

router.post('/createWithFile', auth, async (req, res) => {
    const fileName = `${UPLOAD_DIR}${generateRandomString()}${SUFFIX}`;
    fileUploader(req, fileName).catch((error) => {
        console.log(error);
    })
    
    console.log(req.body) //return {}
});

As you can see I am calling fileUploader function with the req parameter and the file is successfully uploaded, but req.body is returning {} instead of the variables I have sent from the UI to the server.

While debugging it, I have seen the request from the UI was sent without the payload, how could it be if the file is successfully uploaded to the server?

Am I trying to access the data using the right way? or I missed something.

Thanks!