Introducing the Amplify UI StorageManager Component for Front-End Web and Mobile

We are excited to unveil the latest addition to Amplify UI—a cloud-integrated UI component known as the StorageManager. This new feature empowers users to easily upload and manage files in the cloud. In this article, we will guide you through the process of utilizing the new StorageManager component, demonstrating how to enable file uploads to Amazon S3 by setting up a NextJS application alongside an Amplify project that incorporates the Storage category.

For those interested in experimenting with the StorageManager component without the hassle of creating AWS resources, feel free to fork this StackBlitz project. This project showcases various configurations of the StorageManager component, utilizing a mocked Amplify Storage backend, meaning files will not actually be uploaded—allowing you to test the component without needing to set up an Amplify project.

Prerequisites

Ensure you have the Amplify CLI installed. The simplest method is to install it globally using npm or yarn: npm i -g @aws-amplify/cli.
An AWS account is required.

Project Creation

To begin, we will create a new NextJS application, though you may opt to use Vite or any other React framework. If you already have a React application, you can skip this step.

yarn create next-app example-app

Follow the prompts to configure your project:

Would you like to use TypeScript with this project? … No / Yes
Would you like to use ESLint with this project? … No / Yes
Would you like to use Tailwind CSS with this project? … No / Yes
Would you like to use src/ directory with this project? … No / Yes
Would you like to use experimental app/ directory with this project? … No / Yes
What import alias would you like configured? … @/*

Navigate into your newly created project:

cd example-app

Next, create a new Amplify project by executing the Amplify CLI:

amplify init

Provide the following information when prompted:

Enter a name for the project: example-app
The configuration will be applied to create resources.

Confirm the project initialization when prompted. You should see a message indicating successful initialization.

Now, let’s add the Storage category:

amplify add storage

Select “Content” from the options presented. You will be prompted to add authentication via Amazon Cognito if you want to store user files. Let’s proceed with the default configuration, allowing both Auth and guest users access.

Complete the prompts to set up your S3 bucket and finalize the setup by deploying your Amplify backend:

amplify push

Once completed, you will have a backend equipped with both Storage and Auth capabilities.

About Amplify Storage

When utilizing the Amplify Storage category, a bucket is created in S3 with three folders: public, private, and protected. These correspond to the accessLevel prop in the StorageManager component. Files uploaded to the private or protected level will follow the path <level>/<user id>/<key>. Ensure that you implement the StorageManager in an application where users are authenticated via Amplify Auth to avoid errors. To simplify the addition of authentication, consider using the Amplify Authenticator component!

Installing the Amplify UI Packages

Execute the following command to install the necessary packages:

npm i --save @aws-amplify/ui-react-storage @aws-amplify/ui-react aws-amplify

The StorageManager represents the first Amplify UI connected component offered in its dedicated package. Future plans include restructuring all connected components into category-specific packages to optimize package sizes.

Configuring Amplify

At the start of your src/pages/_app.tsx file, include these imports:

import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import awsconfig from '../aws-exports';

Subsequently, configure Amplify by adding:

Amplify.configure(awsconfig);

Your src/pages/_app.tsx file should resemble the following:

import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import awsconfig from '../aws-exports';
import type { AppProps } from 'next/app';

Amplify.configure(awsconfig);

export default function App({ Component, pageProps }: AppProps) {
  return (
    
  );
}

Adding the StorageManager Component

Integrate the StorageManager component into your application. Minimum required props include accessLevel, acceptedFileTypes, and maxFileCount.

accessLevel: Defines the Amplify Storage access level—options are ‘public’, ‘private’, or ‘protected’.
acceptedFileTypes: An array specifying the HTML file types.
maxFileCount: The maximum number of files permitted for upload simultaneously.

Start by importing the component:

import { StorageManager } from '@aws-amplify/ui-react-storage';

Then, replace the JSX within your function with the following:

<StorageManager
  accessLevel='public'
  acceptedFileTypes={['image/*']}
  maxFileCount={5}
/>

Your src/pages/index.tsx file should now appear as follows:

import { StorageManager } from '@aws-amplify/ui-react-storage';

export default function Home() {
  return (
    <StorageManager
      accessLevel='public'
      acceptedFileTypes={['image/*']}
      maxFileCount={5}
    />
  )
}

Testing the StorageManager Component

Finally, run the development server to observe the StorageManager component in action:

npm run dev

You can now drag and drop files onto the StorageManager or utilize the file picker to see uploads in action.

For further insights, check out this blog post. Additionally, for expert knowledge, refer to this authoritative source on the topic. If you’re looking for excellent resources, visit this page.