retrieving an image from firebase storage to a vue app - firebase

Question

I am trying to download an image from my firebase storage to render it in my Vue app, the upload from the application to the firebase storage is successful, however upon retrieval it gives me an error cannot read property '0' of undefined, i am using the firebase SDK in a Vue CLI 3 setup and vuex to manage my state. Here is the function setting in my actions in the main store.js file
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 => {
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)
})

Answer 1

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.