Can not send a file with Ajax using FormData in angular 7

Question

I'm using ASP.NET Core as back-end and I'm trying to send a file using ajax in angular 7. I've created an object of FormData class and added the file to that object using append method. but I'll get errors trying top post the api:

Error: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":415,"statusText":"Unsupported Media Type","url":"https://localhost:44319/Api/TimeLinePost","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://localhost:44319/Api/TimeLinePost: 415 Unsupported Media Type","error":{"type":"https://tools.ietf.org/html/rfc7231#section-6.5.13","title":"Unsupported Media Type","status":415,"traceId":"0HLLKF4AT3QD7:00000005"}}

Here is my angular code:

export class StatusComponent {
  selectedImage: File = null;
  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {

  }
  onImageSelected(event) {
    this.selectedImage = <File>event.target.files[0];
  }
  update() {
    const fd = new FormData();
    fd.append('image', this.selectedImage, this.selectedImage.name);
    this.http.post<boolean>(this.baseUrl + 'Api/TimeLinePost', fd).subscribe(
      result => {
      },
      error => {
        alert('Ops! Somthing went wrong!');
        console.log(`Error: ${JSON.stringify(error)}`)
      }
    )
  }
}

here is my api :

[HttpPost]
public bool Post(IFormFile image)
{ 
    return true;
}

score 1 · Answer 1 · answered Apr 01 '19 at 14:42

It could be solved in 2 ways.

1) Add [FromForm] attribute to action parameter (as answered in this question):

[HttpPost]
public bool Post([FromForm] IFormFile image)
{ 
    return true;
}

2) Add SetCompatibilityVersion(CompatibilityVersion.Version_2_2) in configuration. It will solve binding problems automatically:

public void ConfigureServices(IServiceCollection services)
{
   services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

Can not send a file with Ajax using FormData in angular 7

1 Answers1