How to delete image from firebase storage in react

Question

import { useEffect, useState } from "react";
import { storage } from "./firebase-config";
import { ref, listAll, getDownloadURL } from "firebase/storage";
import "./style.css";

const User = () => {
  const [imgList, setImgList] = useState([]);

  const imageListRef = ref(storage, "images/");

  useEffect(() => {
    listAll(imageListRef).then((res) => {
      console.log("Image Name:", res);
      res.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          setImgList((prev) => [...prev, url]);
        });
      });
    });
  }, []);

  const deleteImage = () => {
    //Code
  };

  return (
    <div>
      <table>
        <tbody>
          {imgList.map((url) => {
            return (
              <tr>
                <td>
                  <img src={url} />
                </td>
                <td>
                  <button onClick={deleteImage}>Delete</button>
                </td>
                <td>
                  <button>update</button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default User;

In this code, you can see the output like this.

But I need to delete the relevant images after clicking this delete button. The problem is, this URL is like this "https://firebasestorage.googleapis.com/v0/b/fir-test-app-3db65.appspot.com/o/images%2Fqo6y0XvSBlKM3XCbY3a6qyQ.jpg6bb0esacc20-50f9-42ss3e-85e8-7fe4?alt=media&token=ab14b995-b7ec-4906-a795-9b8323dde".

Please help me to delete the relevant image with the image name.

Answer 1

Update:

you could use the ref() method which returns a StorageReference for the given url, as follows:

          {imgList.map((url) => {
            return (
              <tr>
                <td>
                  <img src={url} />
                </td>
                <td>
                  <button onClick={deleteImage(url)}>Delete</button> 
                   // syntax of deleteImage(url) most probably to be adapted, I’m not versed in React
                </td>
                <td>
                  <button>update</button>
                </td>
              </tr>
            );
          })}

And then the deleteImage method can be as follows. See the doc from more details:

const deleteImage = (ref) => {
   deleteObject(ref(storage, url));  
};

---

The following initial answer does not take into account the possibility offered by the ref() method.

Your problem comes from the fact that, in your table, you only have the DownloadURLs but in order to call the deleteObject() method on one of the files, you need its StorageReference.

I'm not versed in React so I'm not going to give you the exact code but better some "pseudo" or "approximate" code to give you directions for an implementation.

You need to pass both the URL AND the StorageReference when building the table, something along the following lines:

          {imgList.map((url, fileRef) => {   // <= We pass two Objects to map
            return (
              <tr>
                <td>
                  <img src={url} />
                </td>
                <td>
                 // We call the deleteImage method by passing the file reference. 
                 // I'm not sure the syntax is correct... but you get the idea :-) 
                  <button onClick={deleteImage(fileRef)}>Delete</button> 
                </td>
                <td>
                  <button>update</button>
                </td>
              </tr>
            );
          })}

And then the deleteImage method can be as follows. See the doc from more details:

const deleteImage = (ref) => {
   deleteObject(ref);  
};

---

Update following your comment "Can you tell me how I pass StorageReference?":

Again, I'm not sure this is correct due to my lack of knowledge on React but you could probably do something like the following, passing an object:

  useEffect(() => {
    listAll(imageListRef).then((res) => {
      console.log("Image Name:", res);
      res.items.forEach((item) => {   // item is the StorageReference
        getDownloadURL(item).then((url) => {
          setImgList((prev) => [...prev, {url: url, ref: item}]);
        });
      });
    });
  }, []);

And then

          {imgList.map(fileObj => { 
            return (
              <tr>
                <td>
                  <img src={fileObj.url} />
                </td>
                <td>
                 // We call the deleteImage method by passing the file reference. 
                 // I'm not sure the syntax is correct... but you get the idea :-) 
                  <button onClick={deleteImage(fileObj.fileRef)}>Delete</button> 
                </td>
                <td>
                  <button>update</button>
                </td>
              </tr>
            );
          })}