Upload data to firebase storage and Firebase database from array in react native

manpreet Best Answer 2 years ago

I have an array that contains the local location of some images as shown below.

imagePath= ["file:///data/user/0/com.app.taamoutlet/cache/react-native-image-crop-picker/22536474236950.png","file:///data/user/0/com.app.taamoutlet/cache/react-native-image-crop-picker/22583225016770.png "]

I have done uploading for a single image. As per the code you have seen below I want to upload the images to firebase storage. I want to upload each image in the array to a single folder. And then collect the downloadable URL and each image and store that information under a single product as you see

      () => {
        const fs = RNFetchBlob.fs
        const uid = "flyers/" + this.state.productUid;
        const imageRef = firebase.storage().ref(uid).child(Math.random()+".jpg") //string "dp1.jpg"
        let mime = 'image/jpg'

        //------------------------------------------------
        // coverting to base64
        fs.readFile(this.state.imagePath, 'base64')
          .then((data) => {

            //console.log('data='+data);
            return Blob.build(data, { type: `${mime};BASE64` })
          })
          .then((blob) => {
            //uplaoding Image
            uploadBlob = blob
            return imageRef.put(blob, { contentType: mime })
          })
          .then(() => {
            uploadBlob.close()
            //getting url
            return imageRef.getDownloadURL()
          })
          .then((url) => {
            urls = url;
            console.log('urls=' + urls)
            //================================
            try {


              alert("Uploading Flyer" + this.state.title)

manpreet 2 years ago

As mentioned by Renaud, you have to use Promise.all. Please check out this example:

const promises = [fs.readFile(this.state.imagePath, 'base64'),...];

return Promise.all(promises).then((arrayOfResults) => {
  const furtherPromises = [...]

  return Promise.all(furtherPromises)
    .then((uploadedFiles) => {
      // action required
  })
    .catch((error) => {
      // action required
    });
  }).catch((error) => {
   // action required
});