react native uploading multiple photos to AWS S3

Question

I want to pick photos from my photos album and upload it to AWS S3 and then display the photos using the swiper.

I was able to upload multiple photos to AWS S3. However, I notice that I have to pre-assign how many photos I want to upload to the AWS S3.

For example, if I pre-assign 3 photos to be uploaded to the AWS S3, and pick 3 photos from my album, it works fine. I would see 3 photos. See the code below:

constructor(){
 super()
 this.state = {
 picture1:'',
 picture2:'',
 picture3:'',
  }
}

takePics(){
ImagePicker.openPicker({
multiple: true
}).then(response => {
console.log(response[0].filename)
const file = {
  uri : response[0].sourceURL,
  name: response[0].filename,
  type: 'image/png'
}
const file1 = {
 uri : response[1].sourceURL,
 name: response[1].filename,
 type: 'image/png'
}
const file2 = {
 uri : response[2].sourceURL,
 name: response[2].filename,
 type: 'image/png'
}
const config = {
  bucket:'mybucket',
  region:'my region',
  accessKey:'myaccesskey',
  secretKey:'mysecretkey',
  successActionStatus:201
}
RNS3.put(file, config)
.then((response) => this.setState({picture1:response.body.postResponse.location}))
RNS3.put(file1, config)
.then((response) => this.setState({picture2:response.body.postResponse.location}))
RNS3.put(file2, config)
.then((response) => this.setState({picture3:response.body.postResponse.location}))
})
}

displayPhotos(){
return(
  </View>
  <Swiper style={styles.wrapper} showsButtons={this.state.showsButtons} showsPagination={this.state.showsPagination} loop={true}>
  <View style={styles.slide1}>
  <Image
     style={{width: "100%", height: "100%"}}
     source={{uri:this.state.picture1}}/>
  </View>
  <View style={styles.slide2}>
     <Image
        style={{width: "100%", height: "100%"}}
        source={{uri:this.state.picture2}}/>
  </View>
  <View style={styles.slide3}>
     <Image
        style={{width: "100%", height: "100%"}}
        source={{uri:this.state.picture3}}/>
  </View>
  </Swiper>
  </View>
)
}

However, if I pick less photos(say I pick 2 photos) it wouldn't show anything. Whether I pick 2 or 3 or even more photos I want to display on my screen. Should I use a for loop? any suggestions?

Answer 1

This is how I have done it. It is working fine.

  _upload=(saveImages)=>{
    const config ={
       bucket:'mybucket',
       region:'my region',
       accessKey:'myaccesskey',
       secretKey:'mysecretkey',
       successActionStatus:201
      }

      this.state.saveImages.map((image) => {
           RNS3.put(image,config)
          .then((responce) => {
            console.log('=============********************================');
            console.log(saveImages);
             Alert.alert('You cliked on send!');
          });
      }); 
  }

<View style={styles.Camera}>
     <TouchableOpacity onPress={this.takePic.bind(this)}>
        <Text>Take Picture</Text>
     </TouchableOpacity>
</View>
<View style={styles.Send}>
    <TouchableOpacity onPress={() => this._upload()}>
         <Text>Send</Text>
    </TouchableOpacity>
</View>

Answer 2

I managed to handle it.

constructor(props) {
    super(props)

    this.state = {
      amazonData: [],
      pictures:''
    }
  }
takePics = () => {

    ImagePicker.openPicker({
      multiple: true,
      maxFiles: 3
    }).then(response => {
      store.amazonData = [];
      let tempArray = []
      response.forEach((item) => {
        let image = {
          uri: item.path,
          width: item.width,
          height: item.height,
          name: item.filename,
          type: 'image/png'
        }
        const config = {
          bucket: 'goodvet',
          region: 'ap-northeast-2',
          accessKey: 'AKIAIJ4ZNXCKL6CIYIXQ',
          secretKey: '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',
          successActionStatus: 201
        }
        tempArray.push(image)

        RNS3.put(image, config)
          .then(responseFromS3 => {
            this.setState({ amazonData: [...this.state.amazonData, responseFromS3.body.postResponse.location] })

          })
      })
      this.setState({ pictures: tempArray })
      { this.hideIcons() }

    })
  }

takePicHandler() {
    return (
      <View>
          <SwiperFlatList
            showPagination={this.state.showsPagination}
            data={this.state.pictures}
            renderItem={({ item }) =>
              <View style={styles.uploadedImageView}>
                <Image
                  style={{ width: "100%", height: "100%" }}
                  source={item} />
      </View>
    )
  }