How can i await for file to upload so i can upload next image with params

Question

I am using Drag and Drop file to upload multiple images.

ngx-file-drop

How to use with async await to upload images because i want to send params to next image returned from 1st request.

post_id returned from 1st request should be sent with all next images.

this is what is am doing but it is not waiting:

dropped(files: NgxFileDropEntry[]) {
    this.files = files;
    for (const droppedFile of files) {

      // Is it a file?
      if (droppedFile.fileEntry.isFile) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file(async (file: File) => {
          // Here you can access the real file
          console.log(droppedFile.relativePath, file);

          await new Promise((resolve, reject) => {
            this.http.uploadImages(file, 'UploadImage', this.postId).subscribe((res: any) => {
              if (res.status == true) {
                resolve(true);
                this.postId = res.data.post_id; // i want to send this ID in next request. 
              } else {
                reject();
                console.log(res.message);
              }
            })
          });


        });
      } else {
        // It was a directory (empty directories are added, otherwise only files)
        const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
        console.log(droppedFile.relativePath, fileEntry);
      }
    }
  }

Answer 1

[You can use this trait:

public paramsArray = [
  {
    param1: '1',
    param2:  2
  },
  {
    param1: '3',
    param2:  4
  }
]

public subject: BehaviorSubject<any> = new BehaviorSubject<null>;

construnctor() {
  this.subject.asObservable().subscribe((value) => {
    if (value) {
      this.http.uploadImage(value).subscribe((res) => {
        if (this.paramsArray.length) {
          this.subject.next(paramsArray.splice(0, 1)[0]);
        }
      });
    }
  });
}

startUploading() {
  this.subject.next(this.paramsArray.splice(0, 1)[0]);
}

It will start from index 0 of paramsArray and uploads them one after another.

Answer 2

I suppose that for the first photo that is going to be uploaded, you have a postId stored in this.postId variable. We'll be using that one to upload the first photo, and then introduce a second variable to hold the post_id returned by the upload method.

We're using Observable instead of Promise because as we all know, promises are going to be executed no matter what in the moment we instantiate them, which is not what we want. We're also using concat to make sure all the files are going to be uploaded one by one.

private photoPostId: number | null = null;

dropped(files: NgxFileDropEntry[]) {
  this.files = files;

  const tasks = files.map((droppedFile) => {
    return new Observable<number>((subscriber) => {
      if (droppedFile.fileEntry.isFile) {
        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
        fileEntry.file(async (file: File) => {
          // Here you can access the real file
          console.log(droppedFile.relativePath, file);

          this.http
            .uploadImages(
              file,
              'UploadImage',
              this.photoPostId ?? this.postId
            )
            .subscribe((res: any) => {
              if (res.status == true) {
                subscriber.next(res.data.post_id); // i want to send this ID in next request.
              }
            });
        });
      } else {
        // It was a directory (empty directories are added, otherwise only files)
        const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
        console.log(droppedFile.relativePath, fileEntry);
      }
      subscriber.complete();
    });
  });

  concat(...tasks).subscribe((postId) => {
    this.photoPostId = postId;
  });
}

Answer 3

In case you are looking for a solution on how to get the file using Ngx-file-drop, this is the solution that worked for me.

Pseudocode

• Get the droppedItems
• Filter for files
• Create an obervable stream
• fetch the file(s) and perform desired action

Code

dropped(files: NgxFileDropEntry[]) {
    const droppedFileList = files.filter((droppedFile) => droppedFile.fileEntry.isFile);

    const subscription = new Subscription();

    subscription.add(
      from([droppedFileList])
        .pipe(
          switchMap((array) => {
            console.log('array', array);
            const result = array?.map((droppedFile) => {
              const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
              const promise = new Promise((res) => {
                fileEntry.file((file) => res(file));
              })
              return from(promise);
            })

            return forkJoin(result);            
         })
        )
        .subscribe({
          next: (fileList) => console.log('fileList',fileList),
          error:(err)=> console.error(err)
          complete: () => subscription.unsubscribe()
        });
}

**For API calls**

dropped(files: NgxFileDropEntry[]) {
    const droppedFileList = files.filter((droppedFile) => droppedFile.fileEntry.isFile);

    const subscription = new Subscription();

    subscription.add(
      from([droppedFileList])
        .pipe(
          switchMap((array) => {
            console.log('array', array);
            const result = array?.map((droppedFile) => {
              const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
              const promise = new Promise((res) => {
                fileEntry.file((file) => res(file));
              })
              return from(promise);
            })

            return forkJoin(result);            
         }),
         switchMap((fileList) => apiFn(fileList))
        )
        .subscribe({
          next: (resp) => console.log('resp',resp),
          error:(err)=> console.error(err)
          complete: () => subscription.unsubscribe()
        });
}

apiFn(result){
  const calls = result.map(file => apiServiceFn(file));
  return forkJoin([...calls]);
}

You can know more about ForkJoin here - https://rxjs.dev/api/index/function/forkJoin

Here is a Stackblitz app that can serve as a basis https://stackblitz.com/edit/angular-ivy-osb6kk?file=src/app/app.component.ts