Firebase storage getDownloadURL() doesn't return a working url

Question

I tried to use getDownloadURL() method to retrieve the url of my images which stored in firebase storage.

Weird is it returns a url which is an object, instead of images

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓EXAMPLE URL↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/images%2Fcat.png ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑EXAMPLE URL↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

I did some research online and found out the correct url to display my image should be like this...

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓EXAMPLE URL↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/images%2Fcat.png?alt=media&token=sometoken
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑EXAMPLE URL↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

But I have no clue how to get the url by using getDownloadURL()...

Here's my code...

var storage = firebase.storage();

$scope.getImgUrl = function(file) {
    storage.ref("images/" + file + ".png")
      .getDownloadURL()
      .then(function onSuccess(url) {
        return url;
      })
      .catch(function onError(err) {
        console.log("Error occured..." + err);
      })
  }

Any idea?

Answer 1

So the correct way to get an image url from Firebase is this:

 $scope.getImgUrl = function(file) {
        storage.child("images/" + file +".png").getDownloadURL().then(function(url) {
          return url;
        }).catch(function(error) {
          // Handle any errors here
        });
 }

Note that you are using storage.child() instead of storage.ref()

Answer 2

The return you have in the then() callback doesn't do what you expect it to do. When you call getDownloadUrl() it returns a promise. If you simply bind that promise to the scope, you can use it in your HTML:

$scope.getImgUrl = function(file) {
    return storage.ref("images/" + file + ".png").getDownloadURL();
}

Answer 3

this work for me

firebase.storage().ref().child('Audios/file.wav').getDownloadURL().then(function(downloadURL) {
                        console.log('File available at', downloadURL);
 });

Answer 4

I was also stumbling around with the same problem a couple years later in 2020 xD turns out... I just had to configure my firebase security to public when I'm testing from this

// Only authenticated users can read or write to the bucket
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

to this, in the firebase rules tab

// Only authenticated users can read or write to the bucket
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

Answer 5

the below code works for me. it works for video files and images.

var ref = firebase.storage().ref().child('child');
var file = document.querySelector("#htmlInputTagID").files[0];
var task = ref.child(('file name').toString()).put(file);
var imgURL = "";
task.then(snapshot => {
    snapshot.ref.getDownloadURL().then(url => {
        imgURL = url;//this is the URL I use and it works 
        //for me it can be done also for video files
    });
});