ngx-dropzone для загрузки изображений из списка - PullRequest
Новая
       109

ngx-dropzone для загрузки изображений из списка

1 голос
/ 06 августа 2020

Я использую ngx-dropzone с angular 8. Я использовал ngx-dropzone для загрузки, и он работает, но на этот раз я хочу загрузить изображения из определенного списка c в dropzone. Вот мой код. 

 <ngx-dropzone (change)="onSelect($event)">
     <ngx-dropzone-label>Select/Drop images here!</ngx-dropzone-label>
           <ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" [removable]="true" (removed)="onRemove(f)" *ngFor="let f of files" [file]="f">
           <ngx-dropzone-label></ngx-dropzone-label>
           </ngx-dropzone-image-preview>
          </ngx-dropzone>

Вот мое событие onSelect, которое связывает изображения и sh их в список массивов файлов. 

 onSelect(event) {
    this.alertService.clear();
    console.log(event.addedFiles);
    this.files.push(...event.addedFiles);
    if (this.files.length > 4) {
      this.alertService.error('Please select only four images for each service.');
      this.files = [];
    } else {
      this.bindImages();
    }
  }

 bindImages() {
    this.alertService.clear();
    this.imageList = [];
    this.files.forEach((x) => {
      const file = x;
      if (file.type.split('/')[0] !== 'image') {
        this.alertService.error('Please select image to proceed further.');
        return false;
       }
      if (file.size > 5242880) {
       this.alertService.error('Image size must be equal to or less then 5 MB.');
       return false;
     }
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload =  () => {
      const val = reader.result as string;
      const items = [{Serviceimage: val, ServiceId: this.serviceId, SaloonId: this.saloonId}];
      this.imageList.push(...items);
    };
      reader.onerror = (error) =>  {
      console.log('Error: ', error);
      return;
   };
      });

  }

Вот мои коды api, которые мне возвращают список изображений со строкой base64 

getImages() {
    this.alertService.clear();
    this.imageModel.SaloonId = this.saloonId;
    this.imageModel.ServiceId = this.serviceId;
    this.apiService.Create('Saloon/getServiceImages', this.imageModel).subscribe(
      resp => {
        if (resp.length > 0) {
         // Here to load Images to dropzone.
        }
        console.log(this.files);
        },
      error => {
       this.alertService.error('Error getting images. Please contact admin.');
       },
      () => { console.log('complete'); }
    );
  }

Это изображение возвращает мне следующий список.

введите описание изображения здесь

...