formData is setting empty file variable set from state after using append method on formDate in reactjs using axios

Question

I am using formData with axios in my react frontend app in order to set the file using post method. But, the data that I sent to the backend rest app is getting empty.

const formData = new FormData();
//setting the file upload value from state variable
formData.append("file", file);

Axios.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data'}}).then(res => console.log(res))

Answer 1

It's hard to tell without seeing the backend code but I had this problem once, and the solution for me was that the key that you append the data to needs to be called the exact same thing in front- and backend, and if I'm not mistaken it's case sensitive aswell, which is where I believe my problem came from. So in your case the key is "file", and it needs to be called exactly "file" when you try to access it in your backend aswell.