I work on a .Net Core Web Api and an Angular application. I created a controller which links an image to an item in database:
[HttpPut("[Action]/{id}")]
public async Task<ActionResult<Item>> LinkItemToIcon(int id, IFormFile file)
{
var items = await _context.Items.FirstOrDefaultAsync(t => t.Id == id);
if (items == null)
{
return BadRequest("item null");
}
if (file.Length <= 0)
{
return BadRequest("fileEmpty");
}
using (var memoryStream = new MemoryStream())
{
await file.CopyToAsync(memoryStream);
Item item = new Item() { Id = items.Id, Icon = memoryStream.ToArray() };
_context.Entry(items).CurrentValues.SetValues(item);
_context.SaveChanges();
return Ok(file);
}
}
It works well in Postman, but when I want to use the controller, I get an error:
Headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for https://localhost:5001/api/LinkItemToIcon: 415 Unsupported Media Type"
name: "HttpErrorResponse"
ok: false
status: 415
statusText: "Unsupported Media Type"
url: "https://localhost:5001/api/LinkItemToIcon"
You can see my html in my angular application :
<input type="file" (change)="onSelectedFile($event) name="file">
<input type="button" (click)="linkItem()">
You can see my component :
this.selectedFile : File = null ;
onSelectedFile(e){
this.selectedFile = e.target.files[0]
}
LinkItem(){
var formData = new FormData();
formData.append("file",this.selectedFile, this.selectedFile.name)
this.administrator.LinkItemToIcon(1,formData).subscribe(
r => console.log(r),
err => console.log(err)
)
}
And now my service:
LinkItemToIcon(id,file){
return this.http.put<UploadFile>(`${this.config.catchApiUrl()}Item/LinkItemToIcon/`+ id, file
,{
headers : new HttpHeaders({
'Content-Type' : 'application/json'
})}
)
}
My breakpoint result :
Think you for your help.
breakpoint result
And I have an error message when I want to subscribe to linkItemToIcon
FormData is not defined
Moreover I can change in my code my content-type which is application/json to multipart/form-data because I have an
PUT https://localhost:5001/api/Item/LinkItemToIcon/1 500 (Internal Server Error)
Access to XMLHttpRequest at 'https://localhost:5001/api/Item/LinkItemToIcon/1' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
Best Answer
Follow steps below for a working demo:
Controller
Angular