How to post formData with typescript model in angular6 and asp.net core 2 webapi

Question

I have the following model in asp.net core 2 web api:

public class MainVM
{
        public int ID { get; set; }
        public string Name { get; set; }
        public bool IsActive { get; set; }
        public int DepartmentID { get; set; }
        public IFormFile Logo { get; set; }
        public List<ChildVM> ListChilds { get; set; }

}

public class ChildVM
{
        public string Name { get; set; }
        public int SequenceNo { get; set; }
        public int NoOfPrices { get; set; }
        public IFormFile Image { get; set; }
}

and the endpoint:

[HttpPost]
[Consumes("multipart/form-data")]
public void Post([FromForm]MainVM data)
{
}

Angular6 service that I am using to post data from angular:

addData(mydata: MainVM, logo: File, myImages: File[]): Observable<MainVM> {

    const formData: FormData = new FormData();
    formData.append('Logo', logo, logo.name);
    if (myImages && myImages.length > 0) {
      for (var i = 0; i < myImages.length; i++) {
        formData.append('ListChilds[].Image', myImages[i], myImages[i].name);
      }
    }
    formData.append('data', new Blob([JSON.stringify(mydata)], { type: 'application/json' }));

    console.log(formData);
    return this.http.post<MainVM>('http://localhost:60458/api/mycontroller/', formData, httpOptions).pipe(
      map((res) => { console.log('res'); return res; }),
      catchError(this.handleError('lpc', null))
    );
  }

Now the problem I am facing is that it only receives Logo on web api, all other fields remains null.

I think I am missing something. Please guide me.

Thank you.

user2517610 · Accepted Answer · 2019-07-04 05:05:07Z

Finally I found the solution: First of all I changed my models, I removed the following line from ChildVM:

public IFormFile Image { get; set; }

and added the following line in MainVM:

public List<IFormFile> ListImages{ get; set; }

I did it because I find out that there is some bug in Asp.net Core 2.2 that if we took IFormFile type in sub model the Asp.net Core 2.2 starts to hang (details are in the link below):

https://github.com/aspnet/AspNetCore/issues/4802

Now at client side I changed the models accordingly and changes in service are as follow:

addData(mydata: MainVM, logo: File, myImages: File[]): Observable<MainVM> {

  const formData: FormData = new FormData();
  formData.append('Logo', logo, logo.name);
  this.buildFormData(formData, mydata, null);
  if (myImages && myImages.length > 0) {
    for (var i = 0; i < myImages.length; i++) {
      formData.append('ListImages', myImages[i], myImages[i].name);
    }
  }
 console.log(formData);
 return this.http.post<MainVM>('http://localhost:60458/api/mycontroller/', formData, httpOptions).pipe(
  map((res) => { console.log('res'); return res; }),
  catchError(this.handleError('lpc', null))
 );
}

buildFormData(formData, data, parentKey) {
  if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
   Object.keys(data).forEach(key => {
     console.log(key);
     this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
   });
 } 
 else {
     const value = data == null ? '' : data;

     formData.append(parentKey, value);
  }
 }

Collectives™ on Stack Overflow

How to post formData with typescript model in angular6 and asp.net core 2 webapi

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related