fileUpload.ts

 onFileSelected(event: Event): void {
    const file: File = (<HTMLInputElement>event.target).files[0];
    this.fileName = file.name;
    const { type } = file;

    if (type === 'image/png' || type === 'image/jpg' || type === 'image/jpeg') {
      // this is standart browser api
      const formData = new FormData();
      formData.append('thumbnail', file);

      this.http.post(
        '/api/thumbnail-upload',
        formData,
        // the magic behind upload progress revealed!
        {
          reportProgress: true,
          observe: 'events',
        }
      )
        .pipe(
          catchError(error => {
            this.fileUploadError = true;
            //create observale
            return of(error);
          }),
          //we want to unshow progress bar after upload
          finalize(() => {
            this.uploadProgress = null;
            this.fileUploadError = false;
          })
        )
        // here we will recieve the stream of events emmitted from the http-post
        .subscribe(event => {
          if (event.type === HttpEventType.UploadProgress) {
            const { loaded, total } = event;
            this.uploadProgress = Math.round((loaded / total) * 100);
          }

          if (event.type === HttpEventType.Response) {
            this.onChange(this.fileName)
          }
        });
    } else {
      this.fileUploadError = true;
    }

  }