React Native Image Upload via aws Amplify using Storage class

Question

I have an image. I want to upload it to S3 using aws-amplify. All the Storage class upload examples are using text documents; however, I would like to upload an image. I am using expo which does not have support from react-native-fetch-blob, and react native does not have blob support... yet.

So my options seem to be:

1. Create a node service via lambda.
2. Upload only the base64 info to S3 and not a blob.

const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL); if (status === 'granted') { const image = await ImagePicker.launchImageLibraryAsync({ quality: 0.5, base64: true }); const { base64 } = image; Storage.put(`${username}-profileImage.jpeg`, base64); }

Is this Correct?

Answer 1

EDIT FOR UPDATED ANSWER WITH RN BLOB SUPPORT VERSION: I have been able to solve this now that React Native has announced blob support and now we only need the uri. See the following example:

uploadImage = async uri => {
  const response = await fetch(uri);
  const blob = await response.blob();
  const fileName = 'profileImage.jpeg';
  await Storage.put(fileName, blob, {
    contentType: 'image/jpeg',
    level: 'private'
  }).then(data => console.log(data))
    .catch(err => console.log(err))
}

Old Answer

For all you get to this. I ended up using https://github.com/benjreinhart/react-native-aws3 This worked perfectly! But not the preferred solution as I would like to use aws-amplify.

Answer 2

I would like to add a more complete answer to this question.

The below code allows to pick images from the mobile device library using ImagePicker from Expo and store the images in S3 using Storage from AWS Amplify.

import React from 'react';
import { StyleSheet, ScrollView, Image, Dimensions } from 'react-native'
import { withAuthenticator } from 'aws-amplify-react-native'
import { ImagePicker, Permissions } from 'expo'
import { Icon } from 'native-base'

import Amplify from '@aws-amplify/core'
import Storage from '@aws-amplify/storage'
import config from './aws-exports'

Amplify.configure(config)

class App extends React.Component {
  state = {
    image: null,
  }

  // permission to access the user's phone library
  askPermissionsAsync = async () => {
    await Permissions.askAsync(Permissions.CAMERA_ROLL);
  }

  useLibraryHandler = async () => {
    await this.askPermissionsAsync()
    let result = await ImagePicker.launchImageLibraryAsync(
      {
        allowsEditing: false,
        aspect: [4, 3],
      }
    )

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri })
      this.uploadImage(this.state.image)
    }
  }

  uploadImage = async uri => {
    const response = await fetch(uri);
    const blob = await response.blob();
    const fileName = 'dog77.jpeg';
    await Storage.put(fileName, blob, {
      contentType: 'image/jpeg',
      level: 'public'
    }).then(data => console.log(data))
      .catch(err => console.log(err))
  }

  render() {
    let { image } = this.state
    let {height, width} = Dimensions.get('window')
    return (
      <ScrollView style={{flex: 1}} contentContainerStyle={styles.container}>
        <Icon 
          name='md-add-circle'
          style={styles.buttonStyle}
          onPress={this.useLibraryHandler}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: width, height: height/2 }} />
        }
      </ScrollView>
    );
  }
}

export default withAuthenticator(App, { includeGreetings: true })

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonStyle: {
    fontSize: 45, 
    color: '#4286f4'
  }
});

Answer 3

You can pass file object to .put method

Storage.put('test.png', file, { contentType: 'image/png' })
  .then (result => console.log(result))
  .catch(err => console.log(err));