I am facing an issue with a variable that is supposed to track the progress of image uploads. The variable seems to be working fine, but it remains undefined in my component.
Upload Service method
uploadProfilePic(url:string, user_id:string, image:any) {
this.imgComp.compress(image)
.pipe(take(1))
.subscribe(compressedImage => {
try {
var formdata = new FormData();
formdata.append("profile_photo", compressedImage, compressedImage.name);
formdata.append("user_id", user_id);
this.http.put(url, formdata, { reportProgress: true, observe:'events' }).subscribe( event => {
if(event.type === HttpEventType.UploadProgress) {
this.upload_progress = Math.round(event.loaded / event.total * 100)
console.log(this.upload_progress)
} else if(event.type === HttpEventType.Response) {
this.toast.showToast(`Your profile pic has been updated!`)
//this.upload_progress = undefined
console.log(this.upload_progress)
//setTimeout(function(){ location.reload() }, 4000)
}
})
} catch (error) {
this.toast.showToast(error.message)
}
})
}
I'm using an image compressor service, but I don't think that's the cause of the problem.
Upload Service constructor
constructor(private http: HttpClient, public env: EnvService, private toast: Ion_Toast, private imgComp: ImageCompressorService) { }
Then I call it in my component:
constructor(
private modalController: ModalController,
public imgUploader: ImageUploadService
) { }
To display in the document:
<ion-progress-bar value="{{imgUploader.upload_progress/100}}"></ion-progress-bar>
<h1>{{imgUploader.upload_progress}}</h1>
I have also verified that the service is included in the app-module and everything appears to be correct.
App-Module
providers: [
ImageUploadService
],
I'm not sure if I should also declare the compressor in the providers section, maybe that could resolve the issue.
EDIT
My input doesn't directly use the upload method, it first goes through a select image method.
ImageUploadService
upload_progress: number
selectProfilePic(event, user_id) {
this.uploadProfilePic(`${this.env.API_URL}/users/update_profile_image`, user_id, <File>event.target.files[0])
}