Cannot bind javascript objects in FormData to send from Angular to ASP.NET Core

Rohan Sampat 0
Viewed 39

I'm trying to send a model data along with a file from angular 12 to ASP.NET Core 3.1

I'm usingFormData to append all my model data to send to WEBAPI. The issue is I'm getting all the properties perfectly and file as well but for List type data of for class type data in FormData it is binding as [object object] and on server I'm getting null for that values.

This is how i append my model to FormData

formData: FormData = new FormData();
let data = this.registerForm.value;
  Object.keys(this.registerForm.value).forEach(i => {

    this.formData.append(i, this.registerForm.value[i]);
  });

HttpCall

this.HttpService.postDataWithFile('TradingPartnerForm/Add', this.formData).subscribe((val: any) => { });

HttpService

postDataWithFile(url: string, formData?: FormData, params?: HttpParams) {
if (params != null) {
  this.httpOptions.params = params;
  this.httpOptions.headers = new HttpHeaders({
    'Content-Disposition': 'multipart/form-data'
  })
}
return this.http.post<any>(this.baseUrl + url, formData, this.httpOptions);

}

Class Model

    public string technicalContactName { get; set; }
    public string technicalEmail { get; set; }
    public string shipperCompanyName { get; set; }
    public string tmsName { get; set; }
    public string shipperEmail { get; set; }
    public List<DropDownModel> requestTypeDDL { get; set; }
    public IFormFile certificateUpload { get; set; }

enter image description here

enter image description here

enter image description here

I don't know where I m going wrong, any help would be appriciated.

asp.net-core angular
1 Answers

FormData.append(): The field's value. This can be a string or Blob (including subclasses such as File).

let value = this.registerForm.value[i]
if (typeof value == 'object' && !(value instanceof Blob)) value = JSON.stringify(value)
this.formData.append(i, value);
W.S.0
Related