Configure special inputs

File Uploader

File Uploader 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 File Uploader field, your Amplify app must have an Amplify app with Authentication and Storage enabled.

How it works

The File Uploader input will allow users to select from files on their local device and upload them to an S3 bucket. File Uploader 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, File Uploader will generate a unique S3 key based on the file uploaded. On form submission, File Uploader will return the S3 key of the uploaded file as a String.

Adding it to your form

To use the FileUploader 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 FileUploader, 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 FileUploader component like this:

// imports
import { FileUploader } from "@aws-amplify/ui-react-storage";
// import the processFile helper function which will create unique filenames based on the file contents
import { processFile } from "./utils";

//...
<FileUploader
  accessLevel="public"
  maxFileCount={10}
  acceptedFileTypes={['image/*']}
  processFile={processFile}
  onUploadSuccess={({key}) => {
    // assuming you have an attribute called 'images' on your data model that is an array of strings
    setImages(prevImages => [...prevImages, key])
  }}
  onFileRemove={({key}) => {
    setImages(prevImages => prevImages.filter(img => img !== key))
  }}
/>

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 FileUploader component like this:

// imports
import { FileUploader } from "@aws-amplify/ui-react-storage";
// import the processFile helper function which will create unique filenames based on the file contents
import { processFile } from "./utils";

//...
<FileUploader
  accessLevel="public"
  maxFileCount={1}
  acceptedFileTypes={['image/*']}
  processFile={processFile}
  onUploadSuccess={({key}) => {
    // assuming you have an attribute called 'images' on your data model that is an array of strings
    setImage(key)
  }}
  onFileRemove={({key}) => {
    setImage(undefined)
  }}
/>

See the documentation for the FileUploader 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, File Uploader 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 - File Uploader will prevent file duplication in your S3 bucket.