Retrieve URL from uploaded image on Firebase

Question

I have uploaded an image to Firebase storage, but when I try to retrieve the URL, I get "uploaded_image.ref is not a function" .....

HTML

<form>
<input id="select_Image" type="file" required>
<button type="submit">Upload Image</button>
</form>

JS

let image_url = ""; 

function uploadImage {

  const image = input_image.files[0];
  const path = storage.ref("imagefolder/" + image.name);

  const uploaded_image = path.put(image);
  const the_url = uploaded_image.ref().getDownloadURL();

  image_url = the_url; 
  alert(image_url);

}

The error is telling you that uploaded_image doesn't have a method called ref(). What are you expecting that's different? Have you gone through the documentation for getting download URLs? firebase.google.com/docs/storage/web/download-files — Doug Stevenson
– Doug Stevenson, Commented Feb 22, 2020 at 19:03

Frank van Puffelen · Accepted Answer · 2020-02-22 22:48:53Z

Both the put() method and the getDownloadURL() method need to call the server to do their work. For that reason they return a promise, and you have to wait for that promise to complete to get their results.

In addition, you can only get the download URL for an image, after it's been uploaded. So you should only call getDownloadURL() once the put() has completed.

In code that'd look something like this:

function uploadImage {
  const image = input_image.files[0];
  const path = storage.ref("imagefolder/" + image.name);

  path.put(image).then(function() {
    path.getDownloadURL().then(function(url) {
      alert(url);
    }
  }
}

As said in the comments, the downloadUrl is only usable inside the callback. If you use it elsewhere it may not have the value you want it to have. So any code that requires the download URL should be inside the callback, or be called from there.

Also see:

Paul · Accepted Answer · 2020-02-22 19:10:32Z

0

From what I can tell, the .put() function is async, so you need to handle the callback and do your work inside that function instead. You could do this with async, await, or just use a closure:

const uploaded_image = path.put(image).then((snapshot) => {
     alert("Done!");
   });

Also, according to the docs, you don't actually need the server to tell you the URL because you're supposed to construct it yourself.

answered Feb 22, 2020 at 19:10

Paul

36.4k12 gold badges98 silver badges124 bronze badges

Collectives™ on Stack Overflow

Retrieve URL from uploaded image on Firebase

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related