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

CodePudding user response：

[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.

CodePudding user response：

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