React and Web API - How to submit form with files

Asked

Viewed 48 times

0

I’m using React for front development and c# Web API for back.

I am trying to submit a form that has an input file, in the API I created a Viewmodel to receive this data. Before submitting, I place the form data in a FormData, which is being filled in correctly - I checked in the console - but in the API the object always receives empty values.

var data = new FormData();
data.append('IdMobileOperator', this.state.IdMobileOperator)
data.append('IdProductType', this.state.IdProductType)
data.append('TradeInDate', this.state.TradeInDate)
data.append('File', this.state.files)

$.ajax({
  url: url,
  type: 'POST',
  data: { simCards: data },
  processData: false,
  success: function (response) {
    //do something
  }.bind(this),
  error: function (response) {
    //do something else
  }
});

In the API, the action that receives the data is as follows:

[Route("Api/SimCard/Import")]
[HttpPost]
public async Task<HttpResponseMessage> ImportSimCard([FromBody]SimCardImportViewModel simCards)
{
   //do something
}

As it stands, the action is found by the request, but the object simCards has all properties with no value - o when numeric, null when object, etc.

  • https://answall.com/questions/9704/fazer-upload-ofarchivecom-ajax an example

  • I don’t understand which part of your question is related to the Act

  • 1

    @Caiofelipepereira I quoted React at first to contextualize and also because I thought it might be related to him, but after this afternoon researching, I realized that it was not and I was able to get a reply using Data form. Anyway thanks, and as soon as I have some time left I’ll come back to update the question.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.