How to upload multiple images from angular 8 to asp .net core

Question

I was searching for a solution in the past day about this but never found a solution...

I am sending multiple images from angular using from data and if i check the network for the api call the files are sended but when i check the parameters on the api method it shows count=0

Angular Code

createProduct(product: any, images: File[]) {
// return this.http.post(this.createProductUrl, product).pipe(
  // switchMap((resp: Product) => {

    const colorId = '2';
    const productId = '3';
    const image = new FormData();

    for (let index = 0; index < images.length; index++) {
      image.append('files', images[index]);
    }


    return this.http.post(`${this.createImagesForProduct}/${productId}/color/${colorId}`, image)
    .pipe(map(
      resp => {
        return console.log(resp);
      }
    ));

Back End Method

Google DevTools Network Tab

please i need your help

In your controller action, is Request.Form.Files empty as well? — Xet
– Xet, Commented May 15, 2020 at 9:47
okk, i tried Request.Form.Files and its working but is there a way that i can achive that using fromform? — Kardon63
– Kardon63, Commented May 15, 2020 at 10:50

Cagri Tacyildiz · Accepted Answer · 2020-05-15 09:48:56Z

3

Convert your request body into model

public class Model{
  public int productId{get;set;}
  public int colorId{get;set;}
  public List<IFormFile> files{get;set;}
}

in request write

public async Task<IActionResult> CreateImage(Model param){}

in angular put all elements into formdata

    const image = new FormData();
    image.append('productId',`${productId}`);
    image.append('colorId',`${colorId}`);
    for (let index = 0; index < images.length; index++) {
        image.append('files', images[index]);
    }
    return this.http.post(`${this.createImagesForProduct}`, image)
        .pipe(map(
          resp => {
            return console.log(resp);
          }
        ));

answered May 15, 2020 at 9:48

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to upload multiple images from angular 8 to asp .net core

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related