Not able to upload images to WebAPI from angular4, getting InvalidOperationException

I am trying to upload images by consuming a webapi written in c#. In angular4 after accessing the file uploaded by the user, I try to send the uploaded file in the Form object inside the HTTP - Request. But I am not able to receive the files in "Request.Form.Files". when I try see the values of this in quick watch window I notice it has the exception: '((Microsoft.AspNetCore.Http.Internal.DefaultHttpRequest)Request).Form' threw an exception of type 'System.InvalidOperationException'

Refer snapshot of the exception I am getting in WebAPI services,

enter image description here

HTML for file upload control

 <input type="file" #headerImage (change)="fileChangeHeaderImage($event)" placeholder="Upload file"/>

code from which I am sending the uploaded file in angular4

fileChangeHeaderImage(event: any) {
    let fileList: FileList = event.target.files;
    if (fileList != null) {
      let file: File = fileList[0];
      let formData: FormData = new FormData();
      this.headerFileServerPath = "Images\\FireboltApp\\Headers\\" + this.applicationId;
      this.header_image_path = "/BlueSkyImages/FireboltApp/Headers/" + this.applicationId;
      this.header_image_url = this.header_image_path + "/" + file.name
      this.HeaderImage = file.name;
      formData.append(this.headerFileServerPath, file, file.name);

       this._ClientAPIService.UploadImage(this._SessionService.LoggedInUser, formData, this.headerFileServerPath, this.applicationId, this._SessionService.ClientAPIServiceURL)
}

Wrapper to call the WebAPI inside angular4 component is below.

I am using the HttpClient to do the post request since I am passing the security token through the Interceptor which implements HttpInterceptor.

import { HttpClient } from '@angular/common/http';

@Injectable()
export class ClientAPIService {
constructor(http: HttpClient)
{
   this._http = http;
}
public UploadImage(userName: any, uploadedFile: any, filePath: any, object_id: any, ClientAPIServiceURL: any) {
    this.CLIENTAPISERVICE_UPLOADIMAGE = ClientAPIServiceURL + "FileStream/UploadAppImages";

    this._http.post(this.CLIENTAPISERVICE_UPLOADIMAGE, uploadedFile, {
        //headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
        headers: new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8')
      })
      .catch(error => Observable.throw(error))
      .subscribe(
      data => console.log('CLIENTAPISERVICE -> Uploaded Image successfully'),
      error => console.log(error)
        )
    }
}

WebAPI code where I am trying to access the uploaded files but it is failing:

[Route("api/[controller]")]
//[Authorize]
public class FileStreamController : Controller
{

    [HttpPost("UploadAppImages")]
    public async Task UploadAppImages()
    try
    {

        var files = Request.Form.Files; //Getting exception here: 'Request.Form' threw an exception of type 'System.InvalidOperationException'
        ...
    }
    ...
}

What is the mistake I am doing here? why the Formdata is not accessible in Request.Form object sent from angular4?