I cannot send the original data object from my form through axios to Spring Boot as is is a single object and Spring boot cannot get the @RequestParams for it. Therefore, I am putting the data a FormData object so that it can be sent to a Spring Boot application, however, whenever I append a file to the FormData object, it converts my file array to a string.

Here is the code:

const onSubmit = async (data) => {
        console.log(data, "Form data");

        let payload = new FormData();
        payload.append("JobName", data.JobName);
        payload.append("CandidateFile", data.CandidateFile);
        payload.append("ReferenceFile", data.ReferenceFile);
        console.log(...payload, "Payload")

        for(let pair of payload.entries()) {
            console.log(typeof pair[1]);
        }

        ...

In the console, data comes back with the data object, with files included:

{JobName: 'JobName', ReferenceFile: [File], CandidateFile: [File]}

The FormData payload, in the console, is:

(2) ['JobName', 'JobName']

(2) ['CandidateFile', '[object File]']

(2) ['ReferenceFile', '[object File]']

And all three typeof of the payload values come back as:

String

Is there any way I could send the files through with FormData?

I have tried using the files both in an array, and out, yet it still gives the same result.