JS and Firebase. Upload multiple images, Wait for URL and upload to database

Question

[Sorry for duplicate question]

This is my working JS-function for uploading images. The problem is that the function for uploading the "tool"(data) to the database, don't wait for the imageURL from Firebase. I need some sort of async / await without using a timeout. I want to upload the data to firebase as soon as all of the imageURLs are uploaded.

Here is JS-code (vuex):

createTool ({ commit }, payload) {
  let toolData = {
    croppas: payload.croppas,
    title: payload.title
  }
  var imageURLS = []

                    // outputArray = imageURLS
  function forEachImage(images, outputArray) {
    return new Promise((resolve) => {
    images.forEach(file => {
        file.generateBlob(
            blob => {
              if (blob != null) {
              let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
              let imageRef = firebase.storage().ref('toolImages/').child(rand)
              imageRef.put(blob)
                .then( data => {
                  imageRef.getDownloadURL()
                    .then( downloadURL => {
                      console.log('The Download Link is: ', downloadURL)
                      outputArray.push(downloadURL)
                      console.log('The imageArray after push is: ', outputArray)
                    })
                })
            }     
            })
    })
    resolve()
    })
    }

    async function uploadEachImage () {
    await forEachImage(toolData.croppas, imageURLS)
    console.log(imageURLS)
    const mergedToolData = {
      title: payload.title,
      URLS: imageURLS
    }
    console.log('Uploading to database...')
    firebase.database().ref('tools').push(mergedToolData)
      .then((data) => {
        const key = data.key
        commit('createTool', {
          title: payload.title,
          URLS: imageURLS,
          id: key
        })
      })
    }
  uploadEachImage()
},

My attempt here is to wait for the function "forEachImage" to complete.

The function will:

loop through all the images
generate a blob (image)
upload the blob to firebase
Recieve a URL and put it in a "global" variable (imageURLS)

My desired outcome is this: after that function has completeted all the images, the async function continues and upload the data to the database (also containing the imageURLS[]. As I mentioned, I want to do this without using a timeout. (timer).

Mr. Wilhelm Mr. Wilhelm · Accepted Answer · 2019-05-31T12:25:30

I managed to find a solution with the desired outcome, though it is a rather primitive one.

createTool ({ commit, getters }, payload) {
  commit('setLoading', true)
  const toolData = {
    title: payload.title,
    selectedCategory: payload.selectedCategory,
    description: payload.description,
    kontaktInfo: payload.kontaktInfo,
    creatorId: getters.user.id
  }
  const croppas = {
    croppas: payload.croppas
  }

  var imageURLS = []
  async function forEachImage(images, outputArray) {
    return new Promise((resolve) => {
      images.forEach(async (file) => {
        file.generateBlob(
            async (blob) => {
              if (blob != null) {
                let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
                let imageRef = firebase.storage().ref('toolImages/').child(rand).put(blob)
                  .then( data => {
                    return data.ref.getDownloadURL()
                  })
                let url = await imageRef
                outputArray.push(url)
                console.log('The imageArray after push is: ', outputArray)
                console.log('Antall croppas er: ', croppas.croppas.length)
    console.log('Antall images in imageURLS: ', imageURLS.length + 1)
    if (croppas.croppas.length == imageURLS.length + 1) {
      resolve()
    }
            }     
            })

    })
    })
    }

    async function uploadEachImage () {
    await forEachImage(croppas.croppas, imageURLS)
      .then(() => {
        console.log('Waiting is over')
      })
    console.log(imageURLS)
    const mergedToolData = {
      ...toolData,
      URLS: imageURLS
    }
    console.log('Uploading to database...')
    firebase.database().ref('tools').push(mergedToolData)
      .then((data) => {
        const key = data.key
        commit('createTool', {
          title: payload.title,
          URLS: imageURLS,
          id: key
        })
        console.log(croppas.croppas.length)
        console.log('Antall images in imageURLS: ', imageURLS.length)
      })
      .catch((error) => {
        console.log(error)
      })
      commit('setLoading', false)
    }
  uploadEachImage()
  commit('setLoading', false)
},

JS and Firebase. Upload multiple images, Wait for URL and upload to database

1 Answers