File Uploads with Angular and Express

app.component-snippet.ts

uploads$?: Observable<FileUploadProgress[]>;

onFilesDropped(files: NgxFileDropEntry[]): void {
  this.uploads$ = from(files)
    .pipe(
      mergeMap(selectedFile => {
        const id = uuid();
        const fileEntry = selectedFile.fileEntry as FileSystemFileEntry;
        const observableFactory = bindCallback(fileEntry.file) as any;
        const file$ = observableFactory.call(fileEntry) as Observable<File>;
        return file$
          .pipe(
            switchMap(file => this.uploadFile(file)
              .pipe(
                takeWhile(event => event.type !== HttpEventType.Response),
                filter(isHttpProgressEvent),
                map(event => {
                  const name = file.name;
                  const loaded = event.loaded ?? 0;
                  const total = event.total ?? 1;
                  const progress = Math.round(loaded / total * 100);
                  const failed = false;
                  const done = progress === 100;
                  return {
                    id,
                    name,
                    progress,
                    failed,
                    done
                  };
                }),
              )
            )
          );
      }),
      scan((acc, next) => {
        acc[next.id] = next;
        return {
          ...acc
        };
      }, {} as Record<string, FileUploadProgress>),
      map(progress => Object.values(progress))
    );
}