Recently, I've integrated an image upload feature for my database using the following function:
private saveFileData(upload: Upload): void {
this.firebaseAuth.authState.subscribe(auth => {
this.db.list(`uploads/${auth && auth.email && auth.uid}`).push(upload);
})
}
Now, I'm trying to retrieve the uploaded images by logged-in users only. For this purpose, a pathreference is crucial as it ensures that each user sees only their uploads:
this.firebaseAuth.authState.subscribe(auth => {
if(auth && auth.email && auth.uid) {
this.uploadRef = this.db.list<any>(`uploads/${auth && auth.email && auth.uid}`);
console.log("Retrieving profile data")
}
else {
console.log("Image not found")
}
})
Furthermore, I want to display a list of all the uploaded images in a similar manner:
get getListUploads(): Observable<AngularFireAction<DatabaseSnapshot>[]> {
return this.uploadRef.snapshotChanges().map(changes => {
return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
});
}
However, an error arises in the console:
ERROR TypeError: Cannot read property 'snapshotChanges' of undefined
at UploadService.get [as getListUploads] (upload.service.ts:30)
Although the upload process functions correctly and images are successfully stored in the database, I encounter difficulties retrieving them. Any suggestions on how to resolve this issue?