如何从 firebase 存储（Javascript，React）中的下载链接获取文件名？

Question

I've being trying to get files name from Firebase storage. Right now I got a download link and trying to get name from it.

const showPhoto = () => {
        var eventDOM = event.target;
        var src = eventDOM.getAttribute('src');
        setpickImage(src);
        console.log(src);
        // src = "https://firebasestorage.googleapis.com/v0/b....."
}

I need file name to delete file from storage.

Answer 1

If you want to map a download URL back to a file name, use the refFromURL method .

Also see the documentation on creating a reference from a download URL , which contains this example:

 var httpsReference = storage.refFromURL('https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');

From that Reference you can then get other properties like the file's name .

let fileName = httpsReference.name;

Answer 2

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 javascript and react

 // function to fetch videos / files from firebase storage const fetchVideos = async() => { const storageRef = firebase.storage().ref("your 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; };