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/