Storage

Amplify UI Storage components use Amplify Storage to allow your users to upload and interact with files stored in Amazon S3 with minimal boilerplate.

Quick start

Setup with Amplify Gen 2 Backend

Follow the steps in this guide to set up your Amplify Storage backend.

Setup with Amplify Gen 1 Backend

To set up Amplify using the Gen 1 CLI, follow the steps below:

First, update @aws-amplify/cli with npm or yarn if you're using a version before 6.4.0:

npm install -g @aws-amplify/cli@latest

yarn global add @aws-amplify/cli@latest

Now that you have the Amplify CLI installed, you can set up your Amplify project by running amplify init in your project's root directory.

Then run amplify add storage and follow the prompts to add storage to your backend configuration.

If you have an existing backend, run amplify pull to sync your aws-exports.js with your cloud backend.

You should now have an aws-exports.js file in your src/ directory with your latest backend configuration.

After setting up Amplify make sure to install the Amplify libraries.

Configuring Amplify for Storage UI Components

To use Storage UI components with Amplify, you'll need to call Amplify.configure() as shown below.

Copy

import { Amplify } from 'aws-amplify';
import { StorageImage, StorageManager } from '@aws-amplify/ui-react-storage';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

export const App = () => {
  return (
    <>
      <StorageImage alt="sleepy-cat" path="public/cat.jpeg" />
      <StorageManager path="my_prefix/public" maxFileCount={3} />
    </>
  );
};

Next steps