AWS Mobile
Developer Guide

Add Storage

Important

The following content applies if you are already using the AWS Mobile CLI to configure your backend. If you are building a new mobile or web app, or you're adding cloud capabilities to your existing app, use the new AWS Amplify CLI instead. With the new Amplify CLI, you can use all of the features described in Announcing the AWS Amplify CLI toolchain, including AWS CloudFormation functionality that provides additional workflows.

Set Up the Backend

The AWS Mobile CLI and AWS Amplify library make it easy to store and manage files in the cloud from your JavaScript app.

BEFORE YOU BEGIN

The steps on this page assume you have already completed the steps on Get Started.

Enable the User File Storage feature by running the following commands in the root folder of your app.

awsmobile user-files enable awsmobile push

Connect to the Backend

The examples in this section show how you would integrate AWS Amplify library calls using React (see the AWS Amplify documentation to use other flavors of Javascript).

The following simple component could be added to a create-react-app project to present an interface that uploads images and download them for display.

// Image upload and download for display example component // src/ImageViewer.js import React, { Component } from 'react'; class ImageViewer extends Component { render() { return ( <div> <p>Pick a file</p> <input type="file" /> </div> ); } } export default ImageViewer;

Upload a file

The Storage module enables you to upload files to the cloud. All uploaded files are publicly viewable by default.

Import the Storage module in your component file.

// ./src/ImageViewer.js import { Storage } from 'aws-amplify';

Add the following function to use the put function on the Storage module to upload the file to the cloud, and set your component’s state to the name of the file.

uploadFile(event) { const file = event.target.files[0]; const name = file.name; Storage.put(key, file).then(() => { this.setState({ file: name }); }); }

Place a call to the uploadFile function in the input element of the component’s render function, to start upload when a user selects a file.

render() { return ( <div> <p>Pick a file</p> <input type="file" onChange={this.uploadFile.bind(this)} /> </div> ); }

Display an image

To display an image, this example shows the use of the S3Image component of the AWS Amplify for React library.

  1. From a terminal, run the following command in the root folder of your app.

    npm install --save aws-amplify-react
  2. Import the S3Image module in your component.

    import { S3Image } from 'aws-amplify-react';

Use the S3Image component in the render function. Update your render function to look like the following:

render() { return ( <div> <p>Pick a file</p> <input type="file" onChange={this.handleUpload.bind(this)} /> { this.state && <S3Image path={this.state.path} /> } </div> ); }

Put together, the entire component should look like this:

// Image upload and download for display example component import React, { Component } from 'react'; import { Storage } from 'aws-amplify'; import { S3Image } from 'aws-amplify-react'; class ImageViewer extends Component { handleUpload(event) { const file = event.target.files[0]; const path = file.name; Storage.put(path, file).then(() => this.setState({ path }) ); } render() { return ( <div> <p>Pick a file</p> <input type="file" onChange={this.handleUpload.bind(this)} /> { this.state && <S3Image path={this.state.path} /> } </div> ); } } export default ImageViewer;

Next Steps