Show the progress bar while uploading video with Angular

Question

I am uploading large files to MinIO with Angular2. I want to show the progress bar while user is uploading the video.

Work flow is that I first post a data to the API, which gives me link where I can upload video directly to Minio (in response).

I tried various options and nothing works, I allways get the response during subscribe 'null'..

Service code for first POST request, where I get direct link for uploading to MinIO:

  postLecture(lectureData: any): Observable<any> {
    this.addJwtToHeaders();
    const url = `${this.apiUrl}/x_lecture/`;
    return this.http.post<any>(url, lectureData, httpOptions);
  }

Request which send data to MinIO and from which I want the progress bar:

      uploadVideoToMinio(
        url: string,
        lectureData: any,
        file: any
      ): Observable<any> {
        this.addJwtToHeaders();
        let value = lectureData.videos[0].video_format;
        let video = new FormData();
        video.append('video', file);
    
        let httpOptions2 = {
          headers: new HttpHeaders({
            'Content-Type': 'audio/mp4',
          }),
          reportProgress: true,
          options: {
            observe: 'events',
          },
        };
    
        return this.http.put<any>(url, file, httpOptions2);
      }

My component.ts code is:

    this.uploadSubs = this.uploadVideoService
      .postLecture(lectureData)
      .subscribe(
        (res: any) => {
          console.log(res);
          console.log(res.type);
          console.log(res.type.DownloadProgress);
          if (res.videos[0].video_put_url) {
            let url: string = res.videos[0].video_put_url;
            this.minioSubs = this.uploadVideoService
              .uploadVideoToMinio(url, lectureData, this.selectedVideo)
              .subscribe(
                (res) => {
                  console.log(res);

                  if (res.type == HttpEventType.UploadProgress) {
                    console.log(Math.round((100 / res.total) * res.loaded));
                  }
                  console.log(res);
                  console.log(res.type);
                  console.log(res.type.DownloadProgress);
                },
                (error) => {
                  console.log(error);
                }
              );
          }
        },
        (error) => {
          console.log(error);
        }
      );

I also tried different httpOptions, like:

let httpOptions2 = {
  headers: new HttpHeaders({
    'Content-Type': 'audio/mp4',
  }),
  reportProgress: true,
};

Answer 1

To summary:

• You need to pass the observe option to fulfill the http.post signature, by default, the value of observe is body
• as const is Typescript thing, not angular, scroll down to OBSERVE AND RESPONSE TYPES in the following section to understand more.

I also suggest you take a tour on the link above to fully understand the http service, it will benefit you later.