Multiple drag&drop

[santer545]

Than I drag several files at first, uploaded only one, but second time it work as expected. Please help

[vugar005]

Hi @santer545 . Can you please provide reproducing steps. I just verified, drag and droppped 2 files, all file uploaded. Then did same step again. Can you listen to uploadSuccess or uploadFail to debug?

[santer545]

I add drag and drop , but I didn`t use the enableAutoUpload, I set it it false, so I listened onFileAdded, and at first I cannot upload multiple files and saw only one added file, after that I try one more time and multiple added worked, so I catch this problem only then I do it first time

[santer545]

And also , I didn`t use adpater. Is it required?

Hi @santer545 . Can you please provide reproducing steps. I just verified, drag and droppped 2 files, all file uploaded. Then did same step again. Can you listen to uploadSuccess or uploadFail to debug?

[vugar005]

@santer545 I tried same steps as you. Disabled enableAutoUpload, added 2 files by dragging or choosing file. Listened to fileAdded event and see those files. Are you listening to validationError event ? Also are you using latest package version?

[santer545]

@santer545 I tried same steps as you. Disabled enableAutoUpload, added 2 files by dragging or choosing file. Listened to fileAdded event and see those files. Are you listening to validationError event ? Also are you using latest package version?

So, after 2 long days of debugging, I found the issue... When I using angular material, and any of its modules, at the first attempt, drag and drop loads only one file, the second time everything is fine. I have Angular 7 and Angular Material 7. If you know how to help me, I will be grateful!

[santer545]

Also, I am sure , that MatTable module broke the functionality, if you add material table on page with your drag and drop

[vugar005]

Hi , could you please try with latest library version 12 and share info. Thanks in advance!

[ghost]

Hi, i have same issue. You can reproduce it with StackBlitzDemo from first page : https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fsimple-demo%2Fsimple-demo.component.ts

Just disable cropper and drag&drop 2 files with last version of Chrome. Works fine with Firefox.

I'm on 12.0.2 version.

[isaacfi]

This fail to me too and I'm not using Material and auto upload is activated. Here is my adapter, this only simulates server side loading advance:

import { FilePickerAdapter, FilePreviewModel, UploadResponse, UploadStatus } from "ngx-awesome-uploader";
import { merge, Observable, of } from "rxjs";
import { delay, mapTo } from "rxjs/operators";


export class BrowserLoadFileAdapter extends FilePickerAdapter {

  uploadFile(fileItem: FilePreviewModel): Observable<UploadResponse> {
    const progress50 = {
      status: UploadStatus.IN_PROGRESS,
      progress: 50
    } as UploadResponse;
    const progress80 = {
      status: UploadStatus.IN_PROGRESS,
      progress: 80
    } as UploadResponse;
    const progress100 = {
      status: UploadStatus.IN_PROGRESS,
      progress: 100
    } as UploadResponse;
    const uploaded100 = {
      status: UploadStatus.UPLOADED,
      progress: 100
    } as UploadResponse;
    const observableProgress50 = of(progress50).pipe(delay(200));
    const observableProgress80 = of(progress80).pipe(delay(300));
    const observableProgress100 = of(progress100).pipe(delay(500));
    const observableUploaded100 = of(uploaded100).pipe(delay(700));
    return merge(observableProgress50, observableProgress80, observableProgress100, observableUploaded100);
  }

  removeFile(fileItem: FilePreviewModel): Observable<any> {
    return of(true);
  }
}

Is there any workaround or fix?

BR

[vugar005]

So I tried to reproduce it, by same url @iniesta333 suggested, disabled cropper, added 2 files via drag and drop. It uploaded 2 files as expected.

[LionelMullot]

I reproduce on my project too. After some debugging the issue seems to appear on the dropped function of FilePickerComponent

Why are you using setTimeout here ? When using this kind of trick it's usually that you have an issue with asynchronous calls.

setTimeout(() => this.handleFiles(filesForUpload).subscribe());

And indeed, it's seems that files are pushed in fileForUpload after setTimeout calls.

[vugar005]

Should be fixed from v16.0.1.