How can I delete images from Firebase Storage??(react)

Question

I want to delete images from firebase storage. This below code is my whole code.

import { useState, useEffect } from "react";
import NavBar from "./Tool/TopBar";
import styled from "styled-components";
import {storage} from "./Tool/Firebase";
import {ref, uploadBytes, listAll, getDownloadURL,deleteObject, getStorage} from "firebase/storage";
import {v4} from "uuid";



const Banner=()=>{

    const[imageList, setImageList] = useState([]);
    const imageRef = ref(storage,`image/${image.name + v4()}`);

    // upload image 
    const uploadImage=(e)=>{
        if(image){
        uploadBytes(imageRef, image).then((snap)=>{
            getDownloadURL(snap.ref).then((url)=>{
                setImageList((prev)=>[...prev, url])
            })
        })
    } else {
        alert("Do upload image!")
    }
}
    useEffect(()=>{
        listAll(imageListReg).then((response)=>{
            console.log(response);
            response.items.forEach((item)=>{
                getDownloadURL(item).then((url)=>{
                    setImageList((prev)=>[...prev,url])
                })
            })
        })

    },[])

    const onClickDelete=()=>{
        const storage = getStorage();
        console.log(imageRef);
        const desertRef = ref(storage,`image/study.png`)
        deleteObject(desertRef).then(()=>{
            console.log("delete success");
        }).catch((error)=>{
            console.log("delete error");
        })
    }
    
    return(
        <div className="tableContainer">
            <table className="tableWrap">
            <tbody>
                <tr>
                    <th>title</th>
                    <td><input type="text" value={title}/></td>
                </tr>
                <tr>
                    <th>imageURL</th>
                    <td><input type="text" value={adUrl}/></td>
                </tr>
                <tr>
                    <th>image</th>
                    <td><input type="file" onChange={(e)=>{setImage(e.target.files[0])}}/>
                    <button onClick={uploadImage}>UploadBanner</button>
                    </td>
>! uploading image is not problem
                </tr>
            </tbody>
        </table>
        </div>
        <div className="preview">
        {imageList.map((url) => ( <ul key={url}>
            <li><img src={url} alt=""/>
            <button className="deleteImage" onClick={onClickDelete}>DeleteBanner</button>
            </li></ul>
          ))}
        </div>
    );
}
export default Banner;

The problem is the delete function. I have read Firebase documentation, and this would be possible with the deleteObject function. https://firebase.google.com/docs/storage/web/delete-files#delete_a_file I wonder how can I find firebase storage url.

 const onClickDelete=()=>{
        const storage = getStorage();
        console.log(imageRef);
        const desertRef = ref(storage,`image/study.png`) // how can I find url (image/study.png)
        deleteObject(desertRef).then(()=>{
            console.log("delete success");
        }).catch((error)=>{
            console.log("delete error");
        })
    }

thank you

Answer 1

You can do so, either by removing them manually, form the console or by setting the some variation of following code that fulfill your needs

if (img) {
  const storage = getStorage();
  const storageRef = ref(storage, `profiles/${userId}/profile-image`);
  await deleteObject(storageRef);
}

Don't forget the imports… though