I'm using React and Axios to post formData to an internal .NET API.

The API is expecting data like this:

    [HttpPost("upload")]
    public virtual async Task<IActionResult> PostMulti(Int64 parentId, ICollection<IFormFile> fileData)
    {
        foreach (var file in fileData) {
            await SaveFile(file, parent);
        }

        return Created("", Map(Repository.Get(parentId)));
    }

When I step through the debugger, the count for "fileData" is always 0.

Here is how I'm sending it using Axios:

    const formData = new FormData();
    formData.append('image', this.state.file);

    console.log("this.state.file = ", this.state.file);
    console.log("formData = ", formData);

    axios({
        url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
        method: 'POST',
        data: formData,
        headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data'
        }
    })
       .then((response) => {
            //handle success
            console.log('response -- then: ', response);
            this.setState({
                file: this.state.file
            });
        })
        .catch((response) => {
            //handle error
            console.log('response -- catch: ', response);
        }); 

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:

"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.

Thanks!

I'm using React and Axios to post formData to an internal .NET API.

The API is expecting data like this:

    [HttpPost("upload")]
    public virtual async Task<IActionResult> PostMulti(Int64 parentId, ICollection<IFormFile> fileData)
    {
        foreach (var file in fileData) {
            await SaveFile(file, parent);
        }

        return Created("", Map(Repository.Get(parentId)));
    }

When I step through the debugger, the count for "fileData" is always 0.

Here is how I'm sending it using Axios:

    const formData = new FormData();
    formData.append('image', this.state.file);

    console.log("this.state.file = ", this.state.file);
    console.log("formData = ", formData);

    axios({
        url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
        method: 'POST',
        data: formData,
        headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data'
        }
    })
       .then((response) => {
            //handle success
            console.log('response -- then: ', response);
            this.setState({
                file: this.state.file
            });
        })
        .catch((response) => {
            //handle error
            console.log('response -- catch: ', response);
        }); 

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:

"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.

Thanks!

• javascript
• asp-mvc
• reactjs
• axios

Share Improve this question Follow asked May 21, 2018 at 14:27 SkyeBoniwellSkyeBoniwell 7,1321515 gold badges101101 silver badges218218 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You should post array of the formData

const filesToSubmit = []
filesToSubmit.push((new FormData()).append('image', this.state.file))

and while posting the data the property name should be formData

axios({
    url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
    method: 'POST',
    data: {formData : filesToSubmit},
    headers: {
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data'
    }
})

If there is an issue with constructing an array you need to add IFormFile properties to the array

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.

I ended up using the configuration below, and the POSTs began going through. Again, in my case, I thought I needed FormData, but the below was simple enough:

axios({
    url: myUrl,
    method: 'POST',
    data: `email=${myEmail}`,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})
.then(response => {
    console.log(response);
    })
.catch(error => {
    console.error(error);
});

Update: Not sure how encoded data will work, but since it'll be passed as a string, it's worth a shot!

const myUploadedImage = "data:image/png;name=colors.png;base64,iVBORw0KGgoAAAANSUhEUgAAA5gAAAEECAIAAADCkQz7AAAGGUlEQVR4nO3YIY/IcRzHcWd4AjZJkZQr2I1dIJlyRU5ErkJggg=="