Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I fix 415 unsupported media type on file upload in Angular 6

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, …}

like image 208
user10863293 Avatar asked Jan 03 '19 15:01

user10863293


People also ask

How do you resolve 415 unsupported media type?

Fixing 415 Unsupported Media Type errorsEnsure that you are sending the proper Content-Type header value. Verify that your server is able to process the value defined in the Content-Type header. Check the Accept header to verify what the server is actually willing to process.

What does error code 415 mean?

The HTTP 415 Unsupported Media Type client error response code indicates that the server refuses to accept the request because the payload format is in an unsupported format. The format problem might be due to the request's indicated Content-Type or Content-Encoding , or as a result of inspecting the data directly.


1 Answers

Follow steps below for a working demo:

  1. Controller

    [HttpPut("[Action]/{id}")]
    public async Task<ActionResult> LinkItemToIcon(int id, IFormFile file)
    {
        //your operation
    }
    
  2. Angular

    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.LinkItemToIcon(1, formData).subscribe(
        r => console.log(r),
        err => console.log(err)
        )
    }
    LinkItemToIcon(id, formData) {
        return this.http.put(`api/SampleData/LinkItemToIcon/` + id, formData);
    }
    
like image 126
Edward Avatar answered Oct 24 '22 20:10

Edward