Web Firebase Get Download URL of image from Storage to Display in Table

Question

I want to download the image from the Firebase storage, but I want it to be a button in a table, but I am not sure how to do that? Below is my JS:

    var email = sessionStorage.getItem("email");
var rootRef = firebase.database().ref().child("users");
rootRef.on("child_added", snap => {

    var medname = snap.child("MedName").val();
    var description = snap.child("description").val();
    var end = snap.child("End").val();
    var start = snap.child("Start").val();
    var type = snap.child("Type").val();
    var file = snap.child("fileName").val();

var storageRef = firebase.storage.ref("users/file");
storageRef.getDownloadURL().then(function(url) {
  window.alert(url);
});
$("#demo").append("<tr><td>"+ medname +"</td><td>" + description + 
                        "</td><td>"+ type + "</td><td>" + start + 
                        "</td><td>" + end +"</td><td></td></tr>");    
});

The name of the file gets saved into the database and file.name , then I retrieve that specific file.name and I want to get the URL download for that image from the storage and display that to the user in a table.

Answer 1

Since the image URL has to be loaded from the Firebase Storage servers, it may take some time. The easiest way to deal with this delay is to only add the row to the table once the URL is available:

var storageRef = firebase.storage.ref("users/file");
storageRef.getDownloadURL().then(function(url) {
    $("#demo").append("<tr><td>"+ medname +"</td><td>" + description + 
                            "</td><td>"+ type + "</td><td>" + start + 
                            "</td><td>" + end +"</td><td> " + url + "</td></tr>");    
    });
});