The question is published on by Tutorial Guruji team.
I’m using ng2-file-upload in my Angular 10 project for uploading user photo. The uploading process just goes well. The only problem is that I have to refresh the browser to display the newly uploaded photo. However, I would expect any newly uploaded photo immediately showing up in the photo list other than the user having to take extra step by refreshing the browser in order to have the newly added photo displayed.
Here is my component.ts
ngOnInit(): void {
this.initializeUploader();
this.loadStoreUserPhotos();
}
fileOverBase(e: any) {
this.hasBaseDropzoneOver = e; // here e for event
}
uploadFile(file: File) {
this.memberService.uploadImage(file).subscribe((event: HttpEvent<any>) => {
switch (event.type) {
case HttpEventType.UploadProgress:
this.progress = Math.round(event.loaded / event.total * 100);
break;
case HttpEventType.Response:
setTimeout(() => {
this.progress = 0;
this.addPhotoMode = false;
}, 1500);
}
});
}
loadStoreUserPhotos() {
this.accountService.getStoreUserPhotos(this.member.userId).subscribe((response: IPhoto[]) => {
this.photos = response;
})
}
initializeUploader() {
this.uploader = new FileUploader({
url: this.baseUrl + 'users/add-photo',
authToken: 'Bearer ' + this.user.token,
isHTML5: true,
allowedFileType: ['image'],
removeAfterUpload: true,
autoUpload: false,
maxFileSize: 10 * 1024 * 1024
});
this.uploader.onAfterAddingFile = (file) => {
file.withCredentials = false;
}
this.uploader.onSuccessItem = (item, response, status, headers) => {
if (response) {
const photo: IPhoto = JSON.parse(response);
this.photos.push(photo);
this.user.photoUrl = photo.photoUrl;
}
*this.loadStoreUserPhotos();*
}
}in the initializeUpload method, I supposed to add this.loadStoreUserPhotos() to the end to reload all photos after uploading, including whatever newly successfully uploaded. However, this line does no help at all. User still needs do the extra step – refreshing browser.
My html is sth simplified as below
<div class="col-2" *ngFor="let photo of photos">
<img src="{{photo.photoUrl}}" alt="{{user.username}}" class="img-thumbnail"
</div>Can any one please help me out! Thanks a lot in advance!
Answer
As Aluan pointed out that loadStoreUserPhotos() was actually not executed. My solution is to add setTimeout(() => window.location.reload(), 2000) to the end of uploadFile(). As a matter of fact, the solution is just simply to refresh the current page. Setting delay time is to allow user to catch whatever screen warning or notification message.