Is there a way to create a progress bar in Angular 9 that updates as an image is selected for upload?
I have this code that tracks the upload progress of a file and displays it as a percentage.
let elemnt = document.getElementById('progress');
this.managersService.UpdateWithFile(editModel, this.personalInfo.id, '/Manager/PersonalInfo').subscribe(
(upload: HttpEvent<any>) => {
switch (upload.type) {
case HttpEventType.UploadProgress:
if (upload.total) {
this.queueProgress = Math.round(upload.loaded / upload.total * 100);
if (this.queueProgress <= 100 && this.queueProgress > 0) {
elemnt.style.strokeDashoffset = 440 + 45 + 'px'
this.cdRef.detectChanges();
}
}
break;
case HttpEventType.Response:
if (upload.body['isSuccess']) {
this.queueProgress = null;
this.alertService.success('', upload.body['message']);
this.router.navigate(['/managers']);
} else {
this.cdRef.detectChanges();
}
this.loading = false;
this.queueProgress = null;
break;
}
},
error => {
this.loading = false;
this.queueProgress = null;
});
}
In this segment, I retrieve the percentage value and attempt to adjust the size using HTML pixels.
if (this.queueProgress <= 100 && this.queueProgress > 0) {
elemnt.style.strokeDashoffset = 440 + 45 + 'px'
this.cdRef.detectChanges();
}
However, the issue lies in the fact that this line of code only executes once when the
elemnt.style.strokeDashoffset = 440 + 45 + 'px'queueProgress value changes. I've tried using this.cdRef.detectChanges();, but it doesn't seem to work. What could be the problem? How can I resolve this?