[Vuejs]-Retrieving an image from firebase storage to a vue app

by

0👍

So it would seem you are doing Max’s course on Vue. Excellent course but there are some slight changes to firebase since it was published. You can try this as I think the problem is you are not retrieving the image URL from storage so it isn’t being inserted into your database so the app can’t call it. It’s trying to call “0”. So change your createMeetup function to something like this:

createMeetup ({commit, getters}, payload) {
            const meetup = {
                title: payload.title,
                location: payload.location,
                description: payload.description,
                preview: payload.preview,
                date: payload.date,
                creatorId: getters.user.id
            }
            let storageRef
            let uploadTask
            let key
            firebase.database().ref('meetups').push(meetup)
                .then((data) => {
                    key = data.key
                    return key
                })
                .then(key => {
                    const filename = payload.image.name
                    const ext = filename.slice(filename.lastIndexOf('.'))
                    storageRef = firebase.storage().ref();
                    uploadTask = storageRef.child('meetups/' + key + ext).put(payload.image)
                    return uploadTask
                    })
                    .then((uploadTask) => {
                    // Upload completed successfully, now we can get the download URL
                    uploadTask.ref.getDownloadURL().then((downloadURL) => {
                        firebase.database().ref('meetups').child(key).update({imageUrl: downloadURL})
                        .then(() => {
                            commit('createMeetup', {
                                ...meetup,
                                imageUrl: downloadURL,
                                id: key
                            })
                        })
                        .catch((error) => {
                        })

                    })
                })
        },

And I think that should solve the problem.

Leave a comment