How to save Firebase Storage image url to firebase database?

Question

How can I save the url for an image uploaded to Firebase Storage in Firebase Database?

When the code below runs I get this error:

HTML:

<div>
   <img id="profile-picture">
</div>

JS:

firebase.auth().onAuthStateChanged(function(user) {

var uid = firebase.auth().currentUser.uid

var fileButton = document.getElementById('choose-pfp');

fileButton.addEventListener('change', function(e) {

    var storageRef = firebase.storage().ref("profile_pictures/" + uid);

    var file = e.target.files[0];
    
    storageRef.put(file).then(function(snapshot) {

    window.alert("Profile picture has been uploaded!");



    storageRef.getDownloadURL().then(function(url) {
        document.querySelector('#profile-picture').src = url;

var url = storageRef.getDownloadURL();

        db.collection('users').doc(uid).set({
            pfpURL: url.value,
        
        })
    })
})
});

Frank van Puffelen Frank van Puffelen · Accepted Answer · 2020-08-29T19:54:29

You're calling getDownloadURL() for a second time inside your callback, which replaces the correct download URL with a promise.

The solution is to reuse the url that is passed into then():

storageRef.getDownloadURL().then(function(url) {
    document.querySelector('#profile-picture').src = url;

    db.collection('users').doc(uid).set({
        pfpURL: url,
    })
})

How to save Firebase Storage image url to firebase database?

1 Answers