[AWS Amplify] Store Data in Amazon S3 with React + Amplify

Amazon S3 offers a way to store & retrieve items in the cloud. In this lesson we’ll see how we can easily store images in an S3 bucket using the AWS Amplify Storage API. S3 is object storage built to store and retrieve any amount of data from anywhere on the Internet.

 

Add S3:

amplify add storage

 

Next, we're prompted for a bucket name. If you do use a custom bucket name, please be aware that the bucket name needs to be unique.

For access, we only want to give authorized users access. For the type of access, we'll choose read and write. Now that the resources have been created locally.

 

Run:

amplify push

 

Save file into S3:

import { Storage } from 'aws-amplify'

class App extends Component {
  state = { fileUrl: '', file: '', filename: ''}
  handleChange = e => {
    const file = e.target.files[0]
    this.setState({
      fileUrl: URL.createObjectURL(file),
      file,
      filename: file.name
    })
  }
  saveFile = () => {
    Storage.put(this.state.filename, this.state.file)
    .then(() => {
      console.log('successfully uploading file!')
      this.setState({ fileUrl: '', file: '', filename: ''})
    })
    .catch(err => {
      console.log('error uploading file!', err)
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <input type='file' onChange={this.handleChange} />
        <img src={this.state.fileUrl} />
        <button onClick={this.saveFile}>Save File</button>
      </div>
    );
  }
}

 

Get file from S3: ComponentDidMount will call Storage.get, passing in the name of the image, and then calling this.setState, resetting the value of fileUrl.

class App extends Component {
  state = { fileUrl: ''}
  componentDidMount() {
    Storage.get('1500x500.jpeg')
    .then(data => {
      this.setState({
        fileUrl: data
      })
    })
    .catch(err => { 
      console.log('error fetching image')
    })
}