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
Maximum files reached 1/3 files
document.pdf 2.4 MB
With files Displays the uploaded file(s) below the drop zone. Each file item shows the 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.pdf 1.8 MB
bank_statement.pdf 3.1 MB
Max files Occurs when the maximum number of allowed files has been uploaded. The component prevents additional uploads until an existing file is removed.
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 its name, file size, and a remove button.
  • Users can remove individual files without affecting other uploaded files.
  • Once the maximum of 3 files is reached, the drop zone becomes inactive (Max Files state).
  • Removing a file from the Max Files state returns the component to the With Files state and re-enables the drop zone.
Specs
1
Upload label
  • Displays the title of the file upload component
  • Recommended max 45 char
2
Helper text
  • Optional. Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 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
  • 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.
Default state — items 1, 2, 3, 4, 5
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 state — item 6
Click to upload or drag and drop Supported file types: JPG / PDF
Max file size: 5MB
Maximum files reached 1/3 files
6
document.pdf 2.4 MB
Dos and Don'ts
  1. Check with an AEM form representative if you require to make changes to the default values. Otherwise you should not be making customizations to this component