I'm building a blog where an authenticated user should be able to include an image in a post. I have read all documentation provided by firebase but the only solution I find is to provide the name of the image stored.

The problem is that I don't know what the name of the image will be so I'm looking for a solution where I could use e.target or something to pick the correct image.

Right now, I'm only able to fetch an image if I provide the name of the image in the storage.

const uploadImage = () => {
    if (image == null) return;
    const imageRef = ref(storage, `images/${image.name}`);
    uploadBytes(imageRef, image).then((snapshot) => {
      getDownloadURL(snapshot.ref).then((url) => {
        setImageUrls((prev) => [...prev, url]);
      });
    });
  }; 

  useEffect(() => {
    const fetch = async () => {
      const storage = getStorage();
      const img = ref(storage, `images/${image.name}`); // not working
      await getDownloadURL(img).then((x) => {
        setUrl(x);
      });
    };
    if (url === undefined) {
      fetch();
    }
  }, []);