How to upload multiple image to s3 in react-native?

Question

I got bucket name, accesskey, region from my colleauge.

I want to upload image to s3 bucket.

How can I do this?

Thanks!

Answer 1

Hey GWANHUI KIM

You can use react-native-s3-upload package to upload images to s3 bucket.

   import { RNS3 } from 'react-native-s3-upload';

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

I hope that will work for you! :)

Thanks!

Answer 2

You should also check the Amplify framework from AWS (e.g. Storage.Put).