title: How can I fix 415 unsupported media type on file upload in Angular 6
body: <p>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:</p>
  
  <pre><code>[HttpPut("[Action]/{id}")]
  public async Task&lt;ActionResult&lt;Item&gt;&gt; LinkItemToIcon(int id, IFormFile file)
  {
      var items = await _context.Items.FirstOrDefaultAsync(t =&gt; t.Id == id);
  
      if (items == null)
      {
          return BadRequest("item null");
      }
  
      if (file.Length &lt;= 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);
      }
  }
  </code></pre>
  
  <p>It works well in Postman, but when I want to use the controller, I get an error:</p>
  
  <blockquote>
    <p>Headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
    message: "Http failure response for <a href="https://localhost:5001/api/LinkItemToIcon" rel="noreferrer">https://localhost:5001/api/LinkItemToIcon</a>: 415  Unsupported Media Type"<br>
    name: "HttpErrorResponse"<br>
    ok: false<br>
    status: 415<br>
    statusText: "Unsupported Media Type"<br>
    url: "<a href="https://localhost:5001/api/LinkItemToIcon" rel="noreferrer">https://localhost:5001/api/LinkItemToIcon</a>"  </p>
  </blockquote>
  
  <p>You can see my html in my angular application :</p>
  
  <pre><code>&lt;input type="file" (change)="onSelectedFile($event) name="file"&gt;
  &lt;input type="button" (click)="linkItem()"&gt;
  </code></pre>
  
  <p>You can see my component : </p>
  
  <pre><code>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 =&gt; console.log(r),
         err =&gt; console.log(err)
      )
  }
  </code></pre>
  
  <p>And now my service:</p>
  
  <pre><code>  LinkItemToIcon(id,file){
  return this.http.put&lt;UploadFile&gt;(`${this.config.catchApiUrl()}Item/LinkItemToIcon/`+ id, file
  ,{
    headers : new HttpHeaders({
      'Content-Type' : 'application/json'
    })}
  )
  </code></pre>
  
  <p>}</p>
  
  <p>My breakpoint result : </p>
  
  <p>Think you for your help.
  <a href="https://i.stack.imgur.com/sde5t.png" rel="noreferrer">breakpoint result</a></p>
  
  <p>And I have an error message when I want to subscribe to linkItemToIcon </p>
  
  <blockquote>
    <p>FormData is not defined </p>
  </blockquote>
  
  <p>Moreover I can change in  my code my content-type which is application/json to multipart/form-data because I have an </p>
  
  <blockquote>
    <p>PUT <a href="https://localhost:5001/api/Item/LinkItemToIcon/1" rel="noreferrer">https://localhost:5001/api/Item/LinkItemToIcon/1</a> 500 (Internal Server Error)</p>
    
    <p>Access to XMLHttpRequest at '<a href="https://localhost:5001/api/Item/LinkItemToIcon/1" rel="noreferrer">https://localhost:5001/api/Item/LinkItemToIcon/1</a>' from origin '<a href="http://localhost:4200" rel="noreferrer">http://localhost:4200</a>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>
    
    <p>HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}</p>
  </blockquote>