How to get image url?

Question

JavaScript

Connoisseurs, who will help to understand?
There is a variable img , an array of images is stored here. I'm trying to put all these images in firebase storage and then get a link to each of them and shove it into an empty imageSrc array .
Now I am getting an error:

Cannot read property 'getDownloadURL' of undefined

since snapshot[i].ref shows undefined
Where did I go wrong?)

.then(key => {
     let img = payload.image;
     var f = [];
     for (let i = 0; i < img.length; i++) {   
           f.push(fb.storage().ref(`works/${key}_${i}.${img[i].name.slice(img[i].name.lastIndexOf('.'))}`).put(img[i]))
      }
      console.log(`f: ${f}`);
      return f 
})
.then(snapshot => {
      console.log(`snapshot: ${snapshot}`)
      return new Promise((resolve) => {
          for (let i = 0; i < snapshot.length; i++) {
                snapshot[i].ref.getDownloadURL().then(url => {
                snapshot[i].downloadURL = url
                     resolve(snapshot[i])
                })
           }
      })
})
.then((snapshot) => {
      console.log(`snapshot: ${snapshot}`)
      for (let i = 0; i < snapshot.length; i++) {
            imageSrc.push(snapshot[i].downloadURL)
      }
      console.log(`imageSrc: ${imageSrc}`)
             return fb.database().ref('works').child(key).update({imageSrc: imageSrc})
      })

Answer 1

In general, it turned out to figure it out. I am attaching the code, maybe it will be useful for someone.

async createWork ({commit}, payload) {
            commit('clearError')
            commit('setLoading', true)
            let imageSrc = [];
            let key
            try {
                const newWork =  new Work (
                    payload.name,
                    payload.description,
                    payload.type,
                    payload.date,
                    payload.repository,
                    payload.link,
                    payload.tags,
                    key,
                    imageSrc
                )
                await fb.database().ref('works').push(newWork)
                .then((data) => {
                    key = data.key
                    return key
                })
                .then(key => {
                    payload.image.forEach((item,index) => {
                        let ext = item.name.slice(item.name.lastIndexOf('.'));
                        let itemRef = fb.storage().ref(`works/${key}/${index}.${ext}`);

                        itemRef.put(item).then(() => {
                            itemRef.getDownloadURL().then(url => {
                                imageSrc.push(url)
                                
                            })
                            .then(() => {
                                fb.database().ref('works').child(key).update({imageSrc: imageSrc})
                            })
                        })
                    })
                    
                })
                .then(() => {
                    console.log(key)
                    commit('setLoading', false)
                    commit('createWork', {
                        ...newWork,
                        id: key,
                        imageSrc: imageSrc
                        
                    })
                })
            } catch (error) {
                commit('setError', error.message)
                commit('setLoading', false)
                throw error
            }
        }