Configure special inputs

Storage Manager

Storage Manager fields allow your forms to accept file uploads, which are stored in an Amazon S3 bucket connected to your Amplify app. After uploading, that file's S3 key is stored in your data model, allowing for systematic retrieval using the Amplify JS library.

Prerequisites

In order to use the Storage Manager field, your Amplify app must have an Amplify app with Authentication and Storage enabled.

How it works

The Storage Manager input will allow users to select from files on their local device and upload them to an S3 bucket. Storage Manager automatically connects to your S3 bucket added as part of Amplify Storage.

Files are uploaded immediately upon selection, and an S3 key is generated. By default, Storage Manager will generate a unique S3 key based on the file uploaded. On form submission, Storage Manager will return the S3 key of the uploaded file as a String.

Adding it to your form

To use the StorageManager component with an autogenerated form you will first need a data model that has an attribute that is either a string or an array of strings (a.string().array() in amplify/data/resource.ts). Then make sure to run npx ampx generate forms after you update your data model.

Then go into the generated form JSX file you want to use the StorageManager, for example: ui-components/TodoCreateForm.jsx. If your attribute is an array of strings, look for an <ArrayField> with items={images} (if your attribute name is "images"). Remove that entire component and replace it with the StorageManager component like this:

1// imports
2import { StorageManager } from "@aws-amplify/ui-react-storage";
3// import the processFile helper function which will create unique filenames based on the file contents
4import { processFile } from "./utils";
5
6//...
7<StorageManager
8  accessLevel="public"
9  maxFileCount={10}
10  acceptedFileTypes={['image/*']}
11  processFile={processFile}
12  onUploadSuccess={({key}) => {
13    // assuming you have an attribute called 'images' on your data model that is an array of strings
14    setImages(prevImages => [...prevImages, key])
15  }}
16  onFileRemove={({key}) => {
17    setImages(prevImages => prevImages.filter(img => img !== key))
18  }}
19/>

If you want your data model to have only one image instead of an array of images, look for the <TextField> component with value={image} and replace it with the StorageManager component like this:

1// imports
2import { StorageManager } from "@aws-amplify/ui-react-storage";
3// import the processFile helper function which will create unique filenames based on the file contents
4import { processFile } from "./utils";
5
6//...
7<StorageManager
8  accessLevel="public"
9  maxFileCount={1}
10  acceptedFileTypes={['image/*']}
11  processFile={processFile}
12  onUploadSuccess={({key}) => {
13    // assuming you have an attribute called 'images' on your data model that is an array of strings
14    setImage(key)
15  }}
16  onFileRemove={({key}) => {
17    setImage(undefined)
18  }}
19/>

See the documentation for the StorageManager for all configuration options.

Unique S3 keys

If files with identical S3 keys are uploaded to the same path, S3 will overwrite those files. To prevent accidental overwriting of files, Storage Manager generates a unique S3 key by hashing the file contents. Uploading different files with the same name will not overwrite the original file.

However, if a form submitter uploads two identical files to the same path - even with different file names - Storage Manager will prevent file duplication in your S3 bucket.