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

Question

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)

              //-------------------------------------------

              //----------Inserting Data to Database--------


              usersTable = 'flyers/' + this.state.productUid,
                console.log(usersTable)
              firebase.database().ref(usersTable).set(
                {

                  title: this.state.title,
                  description: this.state.description,
                  imageUrls: url,
                  storename: this.state.storename,
                  user: asyncValue,
                  longitude: this.state.longitude,
                  latitutde: this.state.latitutde
                }
              ).then(

                alert(this.state.title + " flyer sucessfully uploaded")
              )
              //--------------------------------------------

            }
            catch (error) {
              this.setState({ loading: false })
              this.setState({ disabled: false })
              console.log(error.toString())
              alert(error.toString())
            }
            //================================



          })
      }

You have to "play" with Promise.all(), see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. In each of your then()s you have to manage the arrays of results returned by Promise.all() and build a new array to pass to the next Promise.all() — Renaud Tarnec
– Renaud Tarnec, Commented Apr 8, 2019 at 14:31

user3764429 · Accepted Answer · 2019-04-08 16:13:28Z

1

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
});

answered Apr 8, 2019 at 16:13

user3764429

4022 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related