File preview

Under ReviewUpdated May 12, 2026

Description

Displays a preview of a file's content without requiring the user to open the file in a separate application or program.

It helps users quickly:

It's closely related to the File input component.

Anatomy

Desktop example - closed

Desktop example - open

Desktop example - open with added features

Mobile examples

Use case	Example status summary
No files added yet	No files
Files previously uploaded	1 file3 files
Error on displaying the file tiles	We could not show the attachments. Refresh the page to try again.
Uploading new files	Uploading 2 files

Use case	Example error message
File is too large	The file was not uploaded. Upload files smaller than [maxFileSize]MB.
File format not supported	The file format is not supported. Upload [valiable=filetypes] files.
File not found	File not found. Check the file path is correct.
Unknown issues,Service too busy,Service not responding	There were issues importing the file. Try again in a few minutes.
Security issue	The file was not uploaded because it has security issues. Fix the file and try again.
File already uploaded	A file with this name already exists. Rename the file and try again.
Too many files	You can upload a maximum of [maximum number]files. Try deleting some files and try again.
Insufficient storage space	The file was not uploaded because you have reached the storage limit. Delete some files and try again.
Invalid name	Invalid name. File names can include: a-z, A-Z, 0-9, and special characters _.- () and must be 128 characters or less.

Use a descriptive UI label to explain the purpose of the file input.
Use appropriate technology-specific techniques to associate the label with the file input so assistive technologies announce it to the user.

When a user tabs to the file input, move focus to the button rather than the input field.

Use a descriptive and informative Alt text for any images.

Use to define the select file button.

Key	Function
Tab	Navigates to the button in the file input component.
Space	Selects the button in the component.
Enter	Selects the button in the component.

We tested the component using the following software.

Date	Changes
September 2024	New version created. Previous version archived in the frozen Product design system.
October 2024	Updated written guidance.