When using a vuex action to upload an image to Firebase and save the URL, everything seems fine until trying to retrieve the downloadUrl and adding it to the meetup database reference.
The code I have looks like this:
actions: {
createMeetup ({commit, getters}, payload) {
const meetup = {
title: payload.title,
location: payload.location,
description: payload.description,
date: payload.date.toISOString(),
creatorId: getters.user.id
}
let imageUrl
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('.'))
return firebase.storage().ref('meetups/' + key + '.' + ext).put(payload.image)
})
.then(fileData => {
console.log(fileData)
imageUrl = fileData.metadata.downloadURLs[0]
return firebase.database().ref('meetups').child(key).update({imageUrl: imageUrl})
})
.then(() => {
commit('createMeetup', {
...meetup,
imageUrl: imageUrl,
id: key
})
})
.catch((error) => {
console.log(error)
})
}