Error on try to post file from Angular 6 to ASP.NET Core Web Api

Question

I'm trying to do a POST request with multipart/form-data from an Angular 6 application to a REST service in ASP.NET Core, but I have a Error 500. I tried too many solutions, but nothing worked. I tried to execute the request on Postman and get the same problem, but I tried in other software called ARC (Advanced REST Client) and works like a charm and I don't have any idea why.

On the server-side, I getting InvalidDataException: Missing content-type boundary. In my project, I'm using swagger too

here is my code

The request in angular:

public uploadPlanilha(planilha: File, idLote: number): Observable<Array<RequisicaoComposicao>>{
    let formData = new FormData();

    formData.append('arquivo', planilha, planilha.name);
    formData.append('idLote', idLote.toString());

    let httpHeaders = new HttpHeaders();
    httpHeaders = httpHeaders.set("Content-Type", "multipart/form-data");

    return this.httpClient.post<Array<RequisicaoComposicao>>(`${this.API_URL}requisicoes/upload`, formData, {
      headers: httpHeaders
    });
  }

The controller method in Web Api

[HttpPost]
        [Route("upload")]
        [Consumes("multipart/form-data")]
        [DisableRequestSizeLimit]
        public ActionResult<List<RequisicaoComposicao>> PostPlanilhaRequisicoes([FromForm]ArquivoDto arquivoDto)
        {
            try
            {
                using (Stream arquivoPlanilha = arquivoDto.Arquivo.OpenReadStream())
                {
                    List<RequisicaoComposicao> requisicaoComposicoes = _composicaoGestor.Inserir(arquivoPlanilha, int.Parse(arquivoDto.IdLote));
                    return Ok(requisicaoComposicoes);
                }
            }
            catch (Exception)
            {
                return StatusCode(StatusCodes.Status500InternalServerError);
            }
        }

The ArquivoDto class

public class ArquivoDto
        {
            public IFormFile Arquivo { get; set; }
            public string IdLote { get; set; }
        }

HttpHeaders is immutable, you need to set the header like let httpHeaders = new HttpHeaders().set("Content-Type", "multipart/form-data").set("Accept", "multipart/form-data"); otherwise each time you call set a new instance of HttpHeaders is returned and your previous header is overwritten . That's why you are not getting the content-type header at the server. — Niladri
– Niladri, Commented Mar 28, 2019 at 14:07
I changed this, but still not working. I tried with Content-Type on header and tried without this parameter too, but anything worked. — Vinícius da Cruz Maia
– Vinícius da Cruz Maia, Commented Mar 28, 2019 at 14:11
try to use it like let httpHeaders = new HttpHeaders().set("Content-Type", "multipart/form-data") , you can't re-assign the httpHeaders variable. — Niladri
– Niladri, Commented Mar 28, 2019 at 14:13
Also if you are using [FromForm] then the Content-Type should be application/x-www-url-formencoded , but if you only want to post the file then remove [FromForm] and use (IFormFile arquivoDto) as the parameter, the content-type should be multipart/form-data in this case — Niladri
– Niladri, Commented Mar 28, 2019 at 14:22

Anton Toshik · Accepted Answer · 2019-03-27 21:16:38Z

1

Remove the [FromForm] tag you don't need it.

On this line here: formData.append('arquivo', planilha, planilha.name);

change it to formData.append('arquivo', planilha);

I never used it, therefore I don't think you need the [Consumes("multipart/form-data")] attribute ether. (unless you are using something like swagger and you want to tell it what this method is consuming then keep it)

I'd also remove this line httpHeaders = httpHeaders.set("Accept", "multipart/form-data");

answered Mar 27, 2019 at 21:16

Anton Toshik

2,9573 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vinícius da Cruz Maia Over a year ago

I'm using swagger. I removed the codes that you suggested, but still not working.

Anton Toshik Over a year ago

try to remove the httpHeaders = httpHeaders.set("Content-Type", "multipart/form-data"); line as well.

Vinícius da Cruz Maia Over a year ago

I tried this too. Now, I get error 500. In the backend, the error is: System.IO.InvalidDataException: Missing content-type boundary

Niladri Over a year ago

@ViníciusdaCruzMaia check my comment above

user10268539 · Accepted Answer · 2020-07-10 12:52:31Z

0

I use AngularJS + ASP.NET Core 2.1 and find the same error --> System.IO.InvalidDataException: Missing content-type boundary.

My solution is setting 'Content-Type: undefined' in http request front-end. I read somewhere at StackOverflow, you may give it a quick try if it helps.

answered Jul 10, 2020 at 12:52

user10268539

1591 gold badge1 silver badge11 bronze badges

Collectives™ on Stack Overflow

Error on try to post file from Angular 6 to ASP.NET Core Web Api

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related