How to use the @angular/common/http.HttpEventType.UploadProgress function in @angular/common

private getEventMessage(event: HttpEvent, file: File) {
    switch (event.type) {
      case HttpEventType.Sent:
        return `Uploading file "${file.name}" of size ${file.size}.`;

      case HttpEventType.UploadProgress:
        // Compute and show the % done:
        const percentDone = Math.round(100 * event.loaded / event.total);
        return `File "${file.name}" is ${percentDone}% uploaded.`;

      case HttpEventType.Response:
        this.result = event.body as server.weUIUploadFileResult[];
        return `File "${file.name}" was completely uploaded!`;

      default:
        return `File "${file.name}" surprising upload event: ${event.type}.`;
    }
  }

private getEventMessage(event: HttpEvent, file: File) {
    switch (event.type) {
      case HttpEventType.Sent:
        return `Uploading file "${file.name}" of size ${file.size}.`;

      case HttpEventType.UploadProgress:
        // Compute and show the % done:
        const percentDone = Math.round(100 * event.loaded / event.total);
        return `File "${file.name}" is ${percentDone}% uploaded.`;

      case HttpEventType.Response:
        return `File "${file.name}" was completely uploaded!`;

      default:
        return `File "${file.name}" surprising upload event: ${event.type}.`;
    }
  }
  // #enddocregion getEventMessage

map( (res: HttpEvent) => {
        if (res.type === HttpEventType.Response) {
          return res.body.id.toString();
        } else if (res.type ===  HttpEventType.UploadProgress) {
            // Compute and show the % done:
            const UploadProgress = +Math.round((100 * res.loaded) / res.total);
            return UploadProgress;
        }
      })
      );

private getStatusMessage(event) {
    let status;

    switch (event.type) {
      case HttpEventType.Sent:
        return `Uploading Files`;

      case HttpEventType.UploadProgress:
        status = Math.round((100 * event.loaded) / event.total);
        this.uploadProgress.next(status);
        return `Files are ${status}% uploaded`;

      case HttpEventType.DownloadProgress:
        status = Math.round((100 * event.loaded) / event.total);
        this.downloadProgress.next(status); // NOTE: The Content-Length header must be set on the server to calculate this
        return `Files are ${status}% downloaded`;

      case HttpEventType.Response:
        return (event as HttpResponse).body; // `Done`;

      default:
        return `Something went wrong`;
    }
  }

)).subscribe((event) => {
            if (event.type === HttpEventType.UploadProgress) {
                const progress = event.loaded * 100 / event.total;
                this.uploadprogress = progress === 100 ? null : progress;
            } else if (event.type === HttpEventType.Response) {
                if (!this.model.attachments) {
                    this.model.attachments = [];
                }
                (event.body as any).result.attachments
                    .forEach((att: any) => {
                        att.file = att.filename;
                        this.model.attachments.push(att);
                    });

                this.uploadprogress = null;
                this.uploadingFiles = null;
                this.submit();
            }

}).subscribe((event: any) => {
        if (event.type === HttpEventType.UploadProgress) {
          this.progressPercentage = Math.floor( event.loaded * 100 / event.total );
          this.loaded = event.loaded;
          this.total = event.total;
        }
        this.onUpload.emit({ file: this._file, event: event });
      }, (error: any) => {
        if (this.fileUploadSubscription) {

this.http.request(req).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        const percentDone = Math.round(100 * event.loaded / event.total);
        status.setProgress(percentDone);
      } else if (event instanceof HttpResponse) {
        status.setCompleted();
      }
    },
    (err: HttpErrorResponse) => {

this.monitor.uploadConfigFile(conf_file, configType).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress){
        this.showProgress = true;
        this.progress = Math.round(100 * event.loaded / event.total);
      }
      else if (event.type === HttpEventType.Response){
        this.msgs = [];
        this.msgs.push({severity: 'success', summary: 'Success', detail: 'Configuration Uploaded! The service will be restarted shortly.'});
      }  
    },
    err=>{

return tap((event: HttpEvent) => {
      if (event.type === HttpEventType.UploadProgress) {
        cb(Math.round((100 * event.loaded) / event.total));
      }
    });
  }

filter(event =>
                event.type === HttpEventType.UploadProgress ||
                event.type === HttpEventType.Response),
            map(event => {