File upload + description

A file upload field that allows users to easily attach files within a form. Users can click to browse or drag and drop files directly into the designated drop zone.

Default
Upload Files
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
Please do not upload any sensitive documents 0/3 files
States
Upload Files
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
Please do not upload any sensitive documents 0/3 files
Default Standard appearance when no files are uploaded.
Upload Files
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
Please do not upload any sensitive documents 0/3 files
Hover Occurs when the user's cursor moves over the drop zone.
Upload Files
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
Please do not upload any sensitive documents 0/3 files
Drag over The drop zone changes color to signal that the file can be dropped.
Upload Files
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
Please do not upload any sensitive documents 0/3 files
Disabled The component is unavailable if file uploads are not permitted in the current context.
Upload Files
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
Please do not upload any sensitive documents 1/3 files
document.pdf 2.4 MB
With files Displays the uploaded file(s) below the drop zone. Each file item shows a preview (square thumbnail for images, document icon for non-images), file name, file size, and a remove button. The file counter updates to reflect the current count. The drop zone remains active below the file list to allow additional files to be added, up to the maximum limit. Users can remove individual files without re-uploading others.
Upload Files
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
File size exceeded 0/3 files
Error Triggered when the uploaded file fails validation. If the file size or type is invalid, an error message appears below the component.
Upload Files
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
Maximum files reached 3/3 files
document.pdf 2.4 MB
photo_id.jpg 1.8 MB
bank_statement.pdf 3.1 MB
Max files Occurs when the maximum number of allowed files has been uploaded. The drop zone uses inactive (disabled) styling and no longer accepts uploads. Remove buttons remain active. Removing a file re-enables the drop zone.
Behaviour
Triggers
  • Clicking anywhere within the drop zone opens the system file picker.
  • Dragging a file and releasing it over the drop zone immediately initiates the upload (desktop and tablet only).
  • On mobile, tapping the zone opens the system file picker or the device's camera roll, depending on the platform.
File Validation
  • These are the default values.
  • Accepted file types: PDF, JPG.
  • Maximum file size: 5 MB per file.
  • Maximum number of files: 3 files.
  • If a file fails validation, the component enters the Error state and displays a specific error message identifying the reason — for example: "File exceeds the 5 MB size limit" or "File type not supported. Please upload PDF, or JPG only."
  • A failed file does not count toward the file counter.
File Management
  • Each uploaded file displays a preview (square thumbnail for images, document icon for non-images), file name, file size, and a remove button.
  • Users can remove individual files without affecting other uploaded files.
  • Once the maximum number of files is reached (default: 3), the drop zone becomes inactive and uses disabled styling (Max Files state). The helper text shows "Maximum files reached" in orange.
  • Removing a file from the Max Files state returns the component to the With Files state, clears the disabled drop zone styling, and re-enables uploads.
Specs
1
Upload label
  • Displays the title of the file upload component
  • Recommended max 45 char (include spaces).
  • Max 90 char (include spaces).
2
Helper text (Optional)
  • Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 char (include spaces).
  • Max 60 char (include spaces).
3
File Counter
  • Shows the current number of uploaded files out of the maximum (e.g. "2/3 files").
  • Displays progress toward maximum file limit
4
Upload Area (Drop Zone)
  • Interactive zone for file selection via click or drag-and-drop (desktop/tablet).
  • Always include instructions.
5
File Requirements
  • Lists supported file formats and the maximum file size.
  • Always visible inside the drop zone in the Default state.
  • Helps users understand upload restrictions before they attempt to upload.
6
Uploaded File Item
  • Image files show a square cropped thumbnail preview. Non-image files show the default document icon.
  • Displays the uploaded file name and extension type.
  • Shows the file size in human-readable format (KB / MB).
  • Includes a remove button to delete the file individually.
1 Upload Files
4
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
5
2 Please do not upload any sensitive documents 0/3 files 3
With files
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
Please do not upload any sensitive documents 2/3 files
6
document.pdf 2.4 MB
photo_id.jpg 1.8 MB
Customising options in AEM
  • The following can be configured per form instance in AEM. Defaults apply.
  • File types: PDF, JPG
  • Max file size: 5 MB per file
  • Max number of files: 3
  • Min number of files: 0 files (Uploading is optional).
Dos and Don'ts
  1. Check with an AEM form representative if you require to customise the default values indicated above. Otherwise you should not be making customisations to this component.