How to Delete Image from Firebase cloud Storage - REACT

Question

I have the following structure in my Storage, Post/ID/image.jpg . Post and ID are folders that can be found easily but ID may contain multiple images. How could I possibly delete all of them ? Inside my code, I have a function that should delete Posts inside firestore database and delete the images reference from the firebase storage

The error thrown is :

TypeError: Cannot read properties of undefined (reading '_throwIfRoot')

Delete Function

const DeletePost = async (e) => {
    e.preventDefault();
    const querySnapshot = await getDocs(collection(db, `${category}Posts`));
    querySnapshot.forEach((docx) => {
        if (post.AdTitle === docx.data().AdTitle) {
            try {
                deleteObject(ref(storage, `${category}Posts`, docx.id).child);
                deleteDoc(doc(db, `${category}Posts`, docx.id));
            } catch (error) {
                console.log("error in delete image, " + error);
            }
            // router.reload();
        }
    });
};

EDIT

Dharmaraj · Answer 1 · 2022-01-09T12:28:13.037

1

There isn't any child property on a StorageReference. Try removing it as shown below:

deleteObject(ref(storage, `${category}Posts`, docx.id + ".ext")) // .child);

// Make sure you add the file extension at the end

Also both deleteObject() and deleteDoc return a promise, so do checkout: Using async/await with a forEach loop

edited Jan 09 '22 at 12:28

answered Jan 09 '22 at 11:47

Dharmaraj

47,845
8
52
84

I first tried without child but I get the following error : `FirebaseError: Firebase Storage: Object 'ElectroniquePosts' does not exist. (storage/object-not-found)` – Laspeed Jan 09 '22 at 12:13
@Laspeed can you share a screenshot of file which you are trying to delete (make sure the path is visible)? And also `console.log(docx.id)` and share the output? – Dharmaraj Jan 09 '22 at 12:15
Please do check the edit @Dharmaraj – Laspeed Jan 09 '22 at 12:27
@Laspeed you do need to add file extension in the ref. Check my updated answer – Dharmaraj Jan 09 '22 at 12:28
Still getting : Firebase Storage: Object 'ElectroniquePosts' does not exist. (storage/object-not-found) – Laspeed Jan 09 '22 at 12:31
@Laspeed are you sure you had collection extension added to the end? – Dharmaraj Jan 09 '22 at 12:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240888/discussion-between-laspeed-and-dharmaraj). – Laspeed Jan 09 '22 at 12:42
Yes I copied and paste your answer – Laspeed Jan 09 '22 at 12:59
@Laspeed I mean you should replace `.ext` with `.png` if your file is PNG. – Dharmaraj Jan 09 '22 at 12:59
I accept multiple type of images so in my ID folder there are png and jpg etc specifying a single type may give a partial result but I still get that weird error 'ElectroniquePosts' doesn't exist. This is really confusing me to the max – Laspeed Jan 09 '22 at 13:09

score 1 · Accepted Answer · answered Jan 09 '22 at 17:55

Following this documentation I finally came up with a working solution and here's the updated code.

try {
    const listRef = ref(storage, `${category}Posts/${docx.id}/`);
    listAll(listRef)
      .then((res) => {
        res.items.forEach((itemRef) => {
          setValues((prevState) => [...prevState, itemRef]);
        });
        if (values !== "") {
          console.log("attempting");
          values?.map((value) =>
            deleteObject(
              ref(storage, `${category}Posts/${docx.id}/${value.name}`)
            ).then(() => {
              console.log("storage success");
            })
          );

          deleteDoc(doc(db, `${category}Posts`, docx.id)).then(() => {
            console.log("doc success");
            router.reload();
          });
        }
      })
      .catch((error) => {
        console.log("error : " + error);
      })

How to Delete Image from Firebase cloud Storage - REACT

2 Answers2