Angular 6 ng2-file-upload send list with file

Question

I have this piece of code in my Angular project and have used ng2-file-upload for uploading images.

export class Product {
    id: string;
    name: string;
    imageUrl: string;
    productCategoryId: string;
    shopId: string;
    productPropertyList: ProductProperty[] = [];
}
export class ProductProperty {
    propertyId: number;
    propertyName: string;
    productId: string;
    propertyValue: string;
}

When I try to send data with the file, the productPropertyList on server side is empty while it has data before sending.

initializeFileUploader(categoryId, shopId) {
    this.uploader = new FileUploader({
      url: this.baseUrl + 'users/' + this.authService.decodedToken.nameid + '/products/CreateProduct',
      additionalParameter: ['Url'],
      authToken: 'Bearer ' + localStorage.getItem('token'),
      isHTML5: true,
      allowedFileType: ['image'],
      autoUpload: false,
      removeAfterUpload: true,
      maxFileSize: 5 * 1024 * 1024
    });
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onBuildItemForm = (item, form) => {
      console.log(this.product.productPropertyList);
      form.append('ProductCategoryId', categoryId);
      form.append('ShopId', shopId);
      form.append('Name', this.product.name);
      form.append('PropertyList', this.product.productPropertyList);
    };
  }

How can I send arrays?

Answer 1

You can JSON stringify it:

form.append('PropertyList',JSON.stringify(this.product.productPropertyList));