I need to delete images from firebase storage (react.js), but when I try to recover the url the console gives me: FirebaseError: Firebase Storage: Object 'images/[object Object]' does not exist. (storage/object-not-found) { "error": { "code": 404, "message": "Not Found." } }
This is the code:
const deleteFromFirebase = (url) => {
let imageRef = storage.ref(`/images/${url}`);
imageRef.delete().then(() => {
console.log("Deleted")
}).catch(err => console.log(err))
};
I need to insert the index?
imageUrl
variable is not a URLYou can prove it by inserting the following console.log
at the top of your function:
const deleteFromFirebase = (url) => {
console.log(JSON.stringify(url, null, 2);
A URL is a thing like https://stackoverflow.com/questions/70558620/firebase-delete-images-from-url
. You wouldn't want to be storing your image at the following location, would you?
/images/https://stackoverflow.com/questions/70558620/firebase-delete-images-from-url
Therefore I suggest that in your "deleteFromFirebase" function you do not call it a URL, but rather a "pathWithinImagesFolder" or something, that will reduce scope for confusion.
const imageUrl = await storage.ref('images').child(uploadTask.metadata.name).getDownloadURL();
console.log("Original value is ",imageUrl)
I suspect it is returning an extra-long URL, perhaps with extra things added at the end to give permissions to download, etc.
Revise all your terminology. There are two separate things.
house.png
;https://google.something.blahblah/bucketName/blah blah?downloadKey=239850598745
So when you are uploading, make this clear:
const pathWithinImages = uploadTask.metadata.name
const downloadUrl = await storage.ref('images').child(pathWithinImages).getDownloadURL();
Store both the pathWithinImages
and the downloadUrl
.
When you come to delete the image, use the pathWithinImages
.
const deleteFromFirebase = (pathWithinImages) => {
storage.ref(`/images/${pathWithinImages}`)
.delete()
.then(() => {
console.log("Deleted")
}).catch(err => console.log(err))
};