Axios Post Form Data

Posted on  by admin
Modified3 years, 11 months ago.

I'm using React and Axios to post formData to an internal .NET API. The API is expecting data like this:. When I step through the debugger, the count for "fileData" is always 0.

Here is how I'm sending it using Axios:.

I use console.log for debugging. It shows me the file object when I write it out(name, size, etc).

It also fires in the ".then" handler of the method and shows this:.

'Content-Type': 'text/plain;charset=UTF-8'

"response -- then: data: Array(0), status: 201, statusText: "Created" ".

So, I have no idea why it's not sending anything to the API and I don't really know what's happening or how to fix this problem. Any help would be greatly appreciated.

1111 gold badges7070 silver badges146146 bronze badges. 146146 bronze badges. You should post array of the formData.

DanDan
6,2391

2727 bronze badges. So I had exactly the same issue, whereby no matter which way I twisted the FormData object and regardless of the headers I sent, I couldn't get .NET to accept the submission.

From the Node.js side, it was difficult to actually inspect the HTTP call issued by Axios - meaning I couldn't see what I was actually POSTing. So I moved the POST to the UI for some debugging, and found that the FormData payload was not being passed as I was expecting, so it was proper that .NET was rejecting.

A1rPun
15.4k

Again, in my case, I thought I needed FormData, but the below was simple enough:. Update: Not sure how encoded data will work, but since it'll be passed as a string, it's worth a shot!

77 gold badges3232 silver badges4848 bronze badges.

4848 bronze badges.
1

Modified3 months ago. I am just trying my first reactJS app. In that I am using axios.post() method for sending data.

But when I check into my network tab, data which I am sending along with request is seems to be in payload. I would like to send the data as form data instead. Am I am missing something? 169169 bronze badges. 1,01822 gold badges1111 silver badges3535 bronze badges.

1111 silver badges3535 bronze badges. If you want to send the data as form data instead of as JSON in the payload, you can create a FormData object and use that as second argument instead.

1919 gold badges172172 silver badges169169 bronze badges.

169169 bronze badges.

You can do this in axios by using FormData() like. And then you can use axios post method (You can amend it accordingly). 22 gold badges99 silver badges3030 bronze badges.

3030 bronze badges. What worked for me is to send the form trough params: instead of data:.

Not the answer you're looking for? Browse other questions tagged multipartform-dataaxios or ask your own question.