1

I am using react-native ImagePicker to select photos and then save it in AWS S3. Every thing works fine but I have one problem.

Problem: I select 3 images using ImagePicker and I am loading an activity indicator when images are uplaoding. I want to turn off the activity indicator when all 3 images are added to my array.

But I don't know how to check if all 3 images are added to the array.

This is my code:

ImagePicker.openPicker({
      multiple: true,
      maxFiles: 3
    }).then(response => {

   ...

    let image = {
            uri: response.uri,
            width: newWidth,
            height: newHeight,
            name: _fileName,
            type: 'image/png'
          }
          const config = {

            bucket: 'bucket',
            region: 'ap-northeast-2',
            accessKey: 'mykey',
            secretKey: 'secretkey',
            successActionStatus: 201
          }

    RNS3.put(image, config)
            .then(responseFromS3 => {

              this.setState({
                imageUrl: [...this.state.imageUrl, responseFromS3.body.postResponse.location]
              }, 
//Every time when image is added the call back below is called. Which is what I don't want.
//I want the call back to be called when all three images are added the the array.   
()=> {this.setState({activityIndicator:false})
//I want to change the status of my activityIndicator to false when all 3 images are added to the array.
//However, this.setState({activityIndicator:false}) is called when one Image is added the to array.
                      })
                    })
                  }).catch((err) => {
                   console.log(err);
                 })
               })
            }).catch(err => {
              this.setState({loadingImageGifVisible:false})
            })
          }
kirimi
  • 1,370
  • 4
  • 32
  • 57
  • Try to use Promise.all – Alexander Vidaurre Arroyo Dec 20 '19 at 05:22
  • @AlexanderVidaurreArroyo thanks for the comment! Could you show me an example? How Could I implement it in my code? – kirimi Dec 20 '19 at 05:43
  • 4
    `Promise.all([RNS3.put(image1,config), RNS3.put(image2, config), RNS3.put(image3,config)]).then(([resp1,resp2,resp3])=>{...})` – Alexander Vidaurre Arroyo Dec 20 '19 at 05:48
  • @AlexanderVidaurreArroyo thank you very much for the comment. Your answer seems right. I have one question tho. Your code assumes that I have select 3 images but you change the code dynamically so that it could run even when I select one or two images? – kirimi Dec 20 '19 at 09:53
  • Yep, but `promise.all` has a drawback, if a promise is rejected then all are rejected even if any was successful https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all. Read the answers for this other question https://stackoverflow.com/questions/31424561/wait-until-all-promises-complete-even-if-some-rejected, there are workarounds for this issue – Alexander Vidaurre Arroyo Dec 20 '19 at 14:09

0 Answers0