Click here to Skip to main content
14,733,966 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm trying to upload multiple files in my Angular Application using ngx-material-file-input since my form is made with angular material and it doesn't support input type file by default. I'm using reactive forms but for some reason, the files are not getting uploaded. Check out my code below for further details. Any sort of assistance is appreciated.


What I have tried:

HTML:
<form fxLayout="row wrap" [formGroup]="productForm" (ngSubmit)="onProductSubmit()" enctype="multipart/form-data">
<div fxFlex="100" fxFlex.gt-sm="100" class="px-1" ngClass.sm="mt-1" ngClass.xs="mt-1" method="post">
              <label>Upload Image</label>
              <mat-form-field class="w-100 form-group">
              <ngx-mat-file-input multiple type="file" formControlName="imagePath" name="imagePath" placeholder="PDF file only" (change)="onSelectedFileMultiple($event)" [accept]="'application/x-zip-compressed,image/*'"></ngx-mat-file-input>
              <mat-icon class="btn-project" mat-raised-button color="accent">folder</mat-icon>
            </mat-form-field>
            </div>
<div class="button-wrap" fxFlex="100" fxFlex.gt-sm="100" class="px-1" ngClass.sm="mt-1" ngClass.xs="mt-1">
              <button class="btn-project" mat-raised-button color="accent" type="submit">Post Product</button>
            </div>
          </form>

typescript:
 productForm: FormGroup;
 public imagePath;
constructor(public productService: ProductService, private formBuilder: FormBuilder) { }
  ngOnInit() {

    this.productForm = this.formBuilder.group({
      imagePath: ['']
   })
  }

  public onSelectedFileMultiple(event) {
    if (event.target.files.length > 0) {
      const files = event.target.files;
      this.productForm.get('imagePath').setValue(files);
      console.log(files)
    }
  }
public onProductSubmit(): any {

    const formData = new FormData();
    formData.append('imagePath', this.productForm.get('imagePath').value);

   this.httpClient.post('http://localhost:4000/api/v1' + '/post-product', formData);
           }
Posted
Updated 13-Aug-20 16:07pm
Comments
Sandeep Mewara 12-Aug-20 5:19am
   
If there was an error, it would be helpful.
Tridib Chatterjee 12-Aug-20 6:12am
   
no error is coming. when logging the data in console, [object FileList] value is shown for imagePath key. But for some reason nothing gets posted

1 solution

public onSelectedFileMultiple(event) {
  if (event.target.files.length > 0) {
    for (let i = 0; i < event.target.files.length; i++) {
      let file = event.target.files[i]
      this.files.push(file)
      this.productForm.get('imagePath').setValue(this.files[i]);
      console.log(this.files)
    }
  }
}


public onProductSubmit(): any {

  const formData = new FormData();

  this.files.forEach(file => {
    formData.append('imagePath[]', file, file.name);
 })
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900