File Uploading Progress Issue

File upload progress not being updated in the observable or completed before the observable is ready

In order for forkJoin to complete, you must make sure that all of the provided observables complete.
What might happen is that forkJoin subscribes too late to the Subjects from allProgressObservables.

I assume that this.sfUploadSnackbar.openSnackbar(this.files, this.progress); will subscribe to this.progress in order to receive the percent for each file.

Here's an idea:

dndUpload (files: Set<...>/* ... */): Observable<any> {
  // Note that there are no subscriptions
  return [...files].map(
    f => from(new Promise((resolve, reject) => file.file(resolve, reject)))
      .pipe(
        map(f => (new FormData()).append('file', f, f.name)),
      )
  )
}

const fileObservables$ = this.dndUpload(files);

const progressObservables$ = fileObservables$.map(
  (file$, fileIdx) => file$.pipe(
    switchMap(formData => {
      const req = /* ... */;

      return this.http.request(req)
        .pipe(
          filter(event.type === HttpEventType.UploadProgress),
          // Getting the percent
          map(e => Math.round(100 * e.loaded / e.total)),
          tap(percent => this.updatePercentVisually(percent, fileIdx))
        )
    })
  )
);

// Finally subscribing only once to the observables
forkJoin(progressObservables$).subscribe(...);

Notice there are a few changes:

• I stopped using a Subject for each file
  
  
  • as a consequence, this.sfUploadSnackbar.openSnackbar(this.files, this.progress); had to be replaced with another approach(this.updatePercentVisually)
• the subscription of the file observables happens in only once place, in forkJoin;

this.http.request will complete when the request fulfills, so forkJoin should be able to complete as well, allowing you to do the 'cleanups'(removing loading progress etc...).

how to upload files and see a progress bar?

There isn't a ready made code available in web to meet your requirement. Syncfusion do have the component that matches what you are looking but unfortunately you need a license to use that.

What Umair mentioned is the best possible so far to upload a file in blazor and that too without a license.

(100.0 * file.Data.Position / file.Size).ToString("0") will give you the percentage of file read. Next, you can use bootstrap or any other progress bar to track your progress.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

In above example, all you have to do is change style and aria-valuenow value. In Blazor your code will something look like this.

@{
    var progress = (100.0 * file.Data.Position / file.Size).ToString("0");
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="@($"width: {progress}%")" aria-valuenow="@progress" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
}

Later, you can play around with css to give you exact look and feel you want.

Related Topics