fileUploadService.ts

fileupload.service.ts

import { Injectable, OnDestroy } from '@angular/core';
import { HttpClient, HttpEventType, HttpEvent } from '@angular/common/http';
import { Subject, BehaviorSubject } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class FileUploadService implements OnDestroy {
  public progress$ = new BehaviorSubject<Number>(0);
  public loading$ = new BehaviorSubject<Boolean>(false);

  private request$ = new Subject<[string, File[]]>();

  constructor(
    private http: HttpClient
  ) {
    this.request$.pipe(
      tap(() => this.progress$.next(0)),
      tap(() => this.loading$.next(false)),
      switchMap(([url, files]) => this.http.post(url, this.toFormData(files), {
        reportProgress: true,
        observe: 'events'
      }))
    ).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress$.next(Math.round((100 * event.loaded) / event.total));
      } else if (event.type === HttpEventType.Response) {
        this.progress$.next(100);
        this.loading$.next(false);
      }
    });
  }

  ngOnDestroy(): void {
    this.request$.unsubscribe();
  }

  public fileUploadCommand(url: string, files: File[]): void {
    this.request$.next([url, files])
  }

  private toFormData(files: File[]) {
    const formData: FormData = new FormData();

    for (let i = 0; i < files.length; i++) {
      formData.append('uploads[]', files[i], files[i].name);
    }
    return formData;
  }
}