React sending empty object instead of formData to API

Question

I did the following request with JS and it worked. Now trying to adapt in for react and getting an empty object being posted. Below just bits of code, but basically I am generating pdf and aiming to send it to backend:

const doc = new jsPDF();
const blob = doc.output('blob');
const email = formData.emailRequired;

const formDataToSend = new FormData();
formDataToSend.append('email', email);
formDataToSend.append('file', blob);
console.log(formDataToSend)

fetch('http://localhost:8080/api/contract',
    {
      method: 'POST',
      data: formDataToSend,
      processData: false,
      contentType: false,
});

Unfortunatelly on submit I get FormData {} - so it's an empty object. Why?

Where are you seeing empty at the frontend or backend? And what is this `formData `? — Apoorva Chikara, Oct 26 '21 at 11:21
Frontend, but it also doesn't arrive at the backend. FormData is a JS Object: const formDataToSend = new FormData(); — Katharina Schreiber, Oct 26 '21 at 11:22
So, you might be incorrectly passing the form data or appending it. — Apoorva Chikara, Oct 26 '21 at 13:52
Exactly the same code worked in vanilla js, and I checkt syntax for react is same. That it's not appending is clear, questions is why :) — Katharina Schreiber, Oct 26 '21 at 13:53

score 0 · Accepted Answer · answered Nov 01 '21 at 10:07

0

FormData is not an empty object, it is displayed like this in the console.

If you want to display all entries, then use this approach

console.log([...formDataToSend.entries()])

Related question How to inspect FormData?

answered Nov 01 '21 at 10:07

Andrey

928
1
12
20

React sending empty object instead of formData to API

1 Answers1