I am currently utilizing ng2-file-upload within my Angular 10 project to allow users to upload their photos. The upload process is functioning correctly, but the issue arises when the newly uploaded photo does not automatically appear in the photo list without refreshing the browser. Ideally, I would like any new photo that is uploaded to be instantly displayed in the photo list without requiring the user to manually refresh the browser.
Below is a snippet from my component.ts file:
ngOnInit(): void {
this.initializeUploader();
this.loadStoreUserPhotos();
}
fileOverBase(e: any) {
this.hasBaseDropzoneOver = e;
}
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 initializeUploader method, I had intended to include this.loadStoreUserPhotos() at the end to refresh all photos after uploading, including any newly uploaded ones. However, this line does not seem to have the desired effect, as users still need to manually refresh the browser.
Here is a simplified version of my HTML:
<div class="col-2" *ngFor="let photo of photos">
<img src="{{photo.photoUrl}}" alt="{{user.username}}" class="img-thumbnail"
</div>If anyone could offer assistance on this matter, it would be greatly appreciated! Thank you in advance!