How to get image filename from Firebase Storage?

user_4431969 0
Viewed 201

I am using the following:

const [allImages, setImages] = useState([]);

 
  const getFromFirebase = () => {
    //1.
    let storageRef = storage.ref(user1);
    //2.
    storageRef.listAll().then(function (res) {
        //3.
        res.items.forEach((imageRef) => {
          console.log(imageRef);
          imageRef.getDownloadURL().then((url) => {
              //4.
              setImages((allImages) => [...allImages, url]);
          });
        });
        
      })
      .catch(function (error) {
        console.log(error);
      });
      console.log(allImages);
  };

and then displaying via:

<button onClick={getFromFirebase}>Show</button><br/><br/>
             <div id="photos">
     {allImages.map((image) => {
        return (
           <div key={image} className="image">
              <img className="uploadedfile" src={image} alt="" />
              <button className="buttondelete" onClick={() => deleteFromFirebase(image)}>
               Delete
              </button>
           </div>

I realise this is returning the getDownloadURL for the image URL, but how do I also return the image filename?

firebase-storage firebase reactjs javascript
3 Answers

To get the filename you can use getMetadata:

imageRef.getMetadata().then(metadata => {
  // do something with metadata.name
});
user_37948120

You can use the 'getMetaData' method.

import { getStorage, ref, getMetadata } from "firebase/storage";

// Create a reference to the file whose metadata we want to retrieve
const storage = getStorage();
const forestRef = ref(storage, 'images/forest.jpg');

// Get metadata properties
getMetadata(forestRef)
  .then((metadata) => {
  // Metadata now contains the metadata for 'images/forest.jpg'
})
.catch((error) => {
   // Uh-oh, an error occurred!
});

You can refer Firebase Docs - File Metadata for a better understanding

user_170703700

To get the file name and url or download link of the videos or files from the firebase storage you can use these two functions in react and javascript

// function to fetch videos/files from firebase storage

  const fetchVideos = async () => {
    const storageRef = firebase.storage().ref("storage folder name");

    const videos = [];
    await storageRef
      .listAll()
      .then(async function (result) {
       
        result.items.forEach(async function (videoRef) {

          // getting the name of the file
          const videoName = videoRef.name;
          
          //getting the url of the file -> calling another function for this
           const videoUrl = await getVideoUrl(videoRef);
          
          // creating the object with name and url
          const videoObj = {
            videoName,
            videoUrl,
          };

          console.log("video obj", videoObj);
          videos.push(videoObj);

        });
      })
      .catch(function (error) {
        // Handle any errors
        return [];
      });
  }
  
  // function to get download url 
  const getVideoUrl = (imageRef) => {
    const videoLink = imageRef
      .getDownloadURL()
      .then(function (videoUrl) {
        //   console.log("videoUrl", videoUrl);
        return videoUrl;
      })
      .catch(function (error) {
        // Handle any errors
        return "";
      });
    return videoLink;
  };
user_124597860
Related