1

songService

songCreate(song){
    console.log(song);
    const formData: FormData = new FormData();
    for (let i = 0; i < song.song.files.length; i++) {
      console.log(song.song.files[i]);
      formData.append('song', song.song.files[i], song.song.files[i].name);
    }
    return this.http.post<any>(`${config.apiUrl}/songs`,formData,{
      reportProgress: true,
      observe: 'events'
    });
  }

component

this.songService.songCreate(data)
      .pipe(first())
      .subscribe((event: HttpEvent<any>) => {
        console.log(event);
        switch (event.type) {
          case HttpEventType.Sent:
            console.log('Request has been made!');
            break;
          case HttpEventType.ResponseHeader:
            console.log('Response header has been received!');
            break;
          case HttpEventType.UploadProgress:
            this.progress = Math.round(event.loaded / event.total * 100);
            console.log(`Uploaded! ${this.progress}%`);
            break;
          case HttpEventType.Response:
            console.log('User successfully created!', event.body);
            setTimeout(() => {
              this.progress = 0;
            }, 1500);
  
        }
      });

jwtinterceptor

export class JwtInterceptor implements HttpInterceptor {
    constructor(private authenticationService: AuthenticationService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.authenticationService.currentUserValue;
        if (currentUser && currentUser.access_token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${currentUser.access_token}`,
                    //'Access-Control-Allow-Origin': '*'
                }
            });
        }

        return next.handle(request);
    }
}

I am uploading song using service but reportprogress isn't working. I want to report progress in component subscription. followed this article for progress report https://www.positronx.io/angular-file-upload-with-progress-bar-tutorial/

Anuj Shah
  • 25
  • 4

0 Answers0