Asp. Net Core 2 - Missing Content-Type Boundary
I'm Trying to Upload a File from a Angular Client to My Asp. Net Core 2 Webapi Service. When I Call the Service, I Get Back an Internal Server Error. That's...
I'm trying to upload a file from a Angular client to my ASP.NET Core 2 WebAPI service. When I call the service, I get back an Internal Server Error. That's the error I'm getting:
The component I'm using client-side is this one: ngx-uploader
In my request options, i set them as you can see here:
const event: UploadInput = {
type: 'uploadAll',
url: this.printService.apiFilesBaseUrl + '/Upload',
method: 'POST',
file: this.files[0],
headers: {
'Content-Type': 'multipart/form-data',
'Accept': '*/*',
'Authorization': 'Bearer ' + this.authService.getToken()
}
};
While, server-side my controller action signature is this one:
[HttpPost]
[Route("Upload")]
[Authorize]
public Guid Post(IFormFile file)
Breakpoints in this controller action never get hit.
Can someone please share ideas about what's happening here?
Here, as requested, i will post my request header and payload:
Thanks in advance.
4 Answers
Check upload request in developer tools network tab, it should have correct format (matching 'Content-Type': 'multipart/form-data'), also you could try removing this header.
You can add content-type: as multipart/form-data; boundary=--14737809831466499882746641449.
I am testing API on postman and added content-type like above it worked for me.
For anyone having similar problem in netcore 3.1 or net 6.0, please make sure You have the Consumes attribute, i.e.:
[HttpPost]
[Consumes("multipart/form-data")]
public async Task<IActionResult> ImportItems(IFormFile file)
{
//...
}
On Angular 14, if you set the header like this:
const httpOptions = { headers: new HttpHeaders().set('Content-Type', 'multipart/form-data')
};
then you should remove this header so Web Browser will add this Content-Type header itself, i.e:
multipart/form-data; boundary=----WebKitFormBoundaryAGc4qL8mDa483NA2
Also make sure that you add enctype attribute of html form element with value multipart/form-data, i.e:
<form #htmlForm method="post" action="#" enctype="multipart/form-data" (submit)="onFormSubmit($event)">
and decorate your asp.net core web api action with Consumes attribute, i.e:
[HttpPost("version")]
[Consumes("multipart/form-data")]
[ProducesResponseType(StatusCodes.Status201Created)]
[ProducesResponseType(StatusCodes.Status400BadRequest)]
[ProducesResponseType(StatusCodes.Status500InternalServerError)]
public async Task<IActionResult> CreateAppVersion()
{
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
