[Fixed] httpclient.post / Sending data to API not working with formData.append but does with body.set

Issue

Im migrating the UX for a legacy application that has the APis developed in ASP.NET

When POSTing as follows, it all works perfect. They get the data:

var APIURL = sessionStorage.getItem('endpoint') + "/api/setplid.aspx";
var options = { headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded') };
var body = new URLSearchParams();
body.set('plid', encodeURIComponent(sessionStorage.getItem('plid')));
body.set('userkey', encodeURIComponent(sessionStorage.getItem('userkey')));
body.set('sessionkey', encodeURIComponent(sessionStorage.getItem('sessionkey')));
this.httpClient.post(APIURL, body.toString(), options).subscribe(
  result => {...

But Now I am required to upload a file, so I changed my code to the following

var APIURL = sessionStorage.getItem('endpoint') + "/api/setplid.aspx";    
let options = { headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded') };
let formData = new FormData();
formData.append("plid",encodeURIComponent(sessionStorage.getItem('plid')));
formData.append("userkey",encodeURIComponent(sessionStorage.getItem('userkey')));
formData.append("sessionkey",encodeURIComponent(sessionStorage.getItem('sessionkey')));
formData.append("myfile", this.weblogo,this.weblogo.name);
this._httpClient.post(APIURL, formData, options).subscribe(
  result => {...

I asked the guys handling the API how they are getting the data, and they said they are using a request.form / For example, request.form("plid"), etc. They said they are getting no values when they request.form

I am wondering if the problem is mine or theirs, or if Im doing wrong when sending the httpClient.Post

Thanks.

Solution

The problem is with your header.

Change this line:

this._httpClient.post(APIURL, formData, options).subscribe(

By this one

this._httpClient.post(APIURL, formData).subscribe(

and they will be able to request.form