Tridib Chatterjee Ответов: 1

Угловая загрузка нескольких файлов с использованием реактивных форм

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.


Что я уже пробовал:

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>

машинописный текст:
 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);
           }

Sandeep Mewara

Если бы была ошибка, это было бы полезно.

Tridib Chatterjee

никакой ошибки не будет. при регистрации данных в консоли для ключа imagePath отображается значение [object FileList]. Но по какой-то причине ничего не публикуется

1 Ответов

Рейтинг:
10

Tridib Chatterjee 

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);
 })