Firebase: Vue.js : Not able to connect storage with database

Question

I am working on my first Vue-Projeect with firebase. I would like to create locations with particular images and other data.

I am working with a tutorial which is unfortunately a bit outdated. Currently I am struggeling with the connection of firebase storage with firebase database.

I am not able to push the downloadable imageUrl in the firebase storage and store it in the database.

Can you guys help me out here? Thank you

createLocation( {commit, getters}, payload) {
        const location = {
            title: payload.title,
            location: payload.location,
            description: payload.description,
            creationDate: payload.creationDate,
            rating: payload.rating,
            coordinates: payload.coordinates,
            filters: payload.filters,
            creatorId: getters.user.id
        }
        let imageUrl
        let key
        firebase.database().ref('locations').push(location)
            .then((data) => {
                key = data.key
                return key
            })
            .then(key => {
                const filename = payload.image.name
                const ext = filename.slice(filename.lastIndexOf('.'))
                console.log(payload.image)
                return firebase.storage().ref('locations/' + key + ext).put(payload.image)
            })
            .then(fileData => {
                imageUrl = fileData.metadata.getDownloadURL
                return firebase.database().ref('meetups').child(key).update({imageUrl: imageUrl})
              })
            .then(() => {
                commit('createLocation', {
                ...location,
                imageUrl:imageUrl,
                id: key
                })
            })
            .catch((error) => {
                console.log(error)
            })
    },

Answer 1

If you look at the reference documentation for metadata.downloadURL it says:

deprecated

Use Reference.getDownloadURL instead. This property will be removed in a future release.

Determining the download URL for a file now requires another roundtrip to the server, so you'll need another then block for that:

firebase.database().ref('locations').push(location)
    ...
    .then(key => {
        const filename = payload.image.name
        const ext = filename.slice(filename.lastIndexOf('.'))
        console.log(payload.image)
        return firebase.storage().ref('locations/' + key + ext).put(payload.image)
    })
    .then(fileData => {
        return fileData.ref.getDownloadURL();
    })
    .then(imageUrl => {
        return firebase.database().ref('meetups').child(key).update({imageUrl: imageUrl})
    })
    ...