Amplify UI

Storage

Cloud-connected UI components for managing user content in your app, with built-in support for Amazon S3.

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.

Auth

The Amplify Storage category requires you have auth set up. When you run amplify add storage it will prompt you to add auth as well.

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.

npm install @aws-amplify/ui-react-storage aws-amplify
yarn add @aws-amplify/ui-react-storage aws-amplify

Configuring Amplify for Storage UI Components

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

cat
import { Amplify } from 'aws-amplify';
import { StorageImage, FileUploader } 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" />
      <FileUploader path="my_prefix/public" maxFileCount={3} />
    </>
  );
};

Next steps

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.