How to get DownloadURL from Firebase Storage

Question

I am working over the storage firebase and I am trying to get the URL and set it to a variable, unfortunately I am not able to do it, something is wrong with my code. Could somebody help me out?

This is the error:

firebase.js:1 Uncaught (in promise) Error: Reference.push failed: first argument contains undefined in property 'PostUsers.ImageURL.i'

This is the code:

console.log('Nice, The file has been successfully uploaded to the Firebase storage!');
var DownloadURL = uploadTask.snapshot.downloadURL;
var Url_File = uploadTask.snapshot.ref.getDownloadURL().then(function (URL) {
           return URL;
           });
           alert(Url_File);
                                    uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
                                        console.log('File available at', downloadURL);
                                        //Url_File = downloadURL;
                                    });
                                    //getting the publication time
                                    var dayObj = new Date();
                                    var day = dayObj.getDate();
                                    var monthNames = ["January", "February", "March", "April", "May", "June",
                                        "July", "August", "September", "October", "November", "December"
                                    ];
                                    var month = monthNames[dayObj.getMonth()]
                                    var year = dayObj.getFullYear();
                                    var hour = dayObj.getHours();
                                    var minutes = dayObj.getMinutes();
                                    var seconds = dayObj.getSeconds();
                                    var GlobalUserName = <%=Session["UserId"] %>;
                                        firebase.database().ref('PostUsers/').push({
                                            ImageURL: Url_File,
                                            userAuthor: GlobalUserName,
                                            day: day,
                                            month: month,
                                            year: year,
                                            hour: hour,
                                            minutes: minutes,
                                            seconds: seconds
                                        });
                                        //console.log('the download Url of your file is: '+ downloadURL);
                                        console.log('User post successfully added to realtime data bases');
                                    });

I have tried in many different ways, however none of them is working properly.

thanks in advance.

Answer 1

In this bit of code:

var Url_File = uploadTask.snapshot.ref.getDownloadURL().then(function (URL) {
    return URL;
});

The download URL is in the promise callback in a variable called URL . It's not in Url_File . Url_File is going to contain a promise returned by then() .

You need to put the code that uses the download URL in the promise callback where it's first available. The way you have it now, the code that uses the download URL is being executed before the URL is available.

Answer 2

The download URL is only available in the then callback that you get from getDownloadURL() . You can't access it outside of that.

So the solution is to move all code that needs the download URL into the callback:

uploadTask.snapshot.ref.getDownloadURL().then(function (URL) {
   //getting the publication time
    var dayObj = new Date();
    var day = dayObj.getDate();
    var monthNames = ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"
    ];
    var month = monthNames[dayObj.getMonth()]
    var year = dayObj.getFullYear();
    var hour = dayObj.getHours();
    var minutes = dayObj.getMinutes();
    var seconds = dayObj.getSeconds();
    var GlobalUserName = <%=Session["UserId"] %>;
    firebase.database().ref('PostUsers/').push({
        ImageURL: URL,
        userAuthor: GlobalUserName,
        day: day,
        month: month,
        year: year,
        hour: hour,
        minutes: minutes,
        seconds: seconds
    });
    console.log('User post successfully added to realtime database');
});

This is a very common pattern when dealing with modern web APIs: they're all asynchronous and your code will have to deal with that.

For more on this see:

• Doug's blog posts
• Firebase use query result outside function (for Firebase Database, where this is a more common cause for confusion)