如何使用 angular front 和 .net core API 在同一个 post 请求中发送对象和文件？

Question

I will try to go straight to the issue I am having. I am using Angular 8 and .net core 2.2.

Lets say I have an http service to save an object that looks something like this:

  let body = new DataObject(); //object with lost of primitive data.
  body.someNumbers = 111;
  body.someStrings = 'some string';

  let options = { withCredentials: true };
  return this.http.post<DataObject>(url, body, options).pipe(
    catchError(this.handleError<DataObject>('SAVE', body))
  );

My end point looks like this:

    [HttpPost]
    [Route("savedata")]
    public async Task<IActionResult> SaveData(DataObject data) {

        await Task.Factory.StartNew((Action)(() => {
           //Do stuff....
        }));

        return Ok();
    }

So far this works fine.

I also have another service to save files that looks like this:

    let imageData = new FormData();
    imageData.append('files', imgFile, imgFile.name);

    let options = { withCredentials: true };
    return this.http.post<FormData>(url, imageData, options).pipe(
      catchError(this.handleError<FormData>('SAVE', imageData)) 
    );

And the end point:

 [HttpPost]
    [Route("saveimg")]
    public async Task<IActionResult> UploadImageAsync(IFormFile imgfile) { 
      //converts to byte[], saves on database and returns id.
      return Ok(imgId);
    }

Basically I want to combine the DataObject and file on the same POST. I tried doing this:

class DataObject() { someNumbers: number; someStrings:string; imgFile: FormData;}

with a corresponding public IFormFile imgFile { get; set; } public IFormFile imgFile { get; set; } public IFormFile imgFile { get; set; } property on my .net class to match.

But I get a 400 Bad Request Error

How do I send both, the object and image on same request to the same endpoint. I if the question has already been answered please provide link. I looked all over but not sure what is the proper search term. Thank you.

Answer 1

You can do as follows

 this.formData = new FormData(); this.formData.append('dataFile', this.file, this.file.name); 

And your json request as follows

const data = { req: //your request object}

And finally append data as a blob to formData and send it to service

this.formData.append('jsonReq', new Blob([JSON.stringify(data)], {
  type: 'application/json'
})); 

return this.http.post(tgtUrl, data, httpOptionsForUpload).pipe(map((res: Response) => { //handle reponse }