File Preview Card
File preview cards show
Last updated
File preview cards show
Last updated
The file preview card pattern often pairs with the pattern to provide information and actions about a file selected for upload. A typical file preview card displays a preview of a selected file, shows the file's upload status, and may include actions (such as "Cancel" or "Edit") for that file upload.
Card: The container element for a file preview
File name: The name of a file, including file extension, e.g. "final-FINAL-version-2.pdf"
Document type: The type of document, e.g. CSV, PDF, MOV
Preview image: A thumbnail version of a media file, or an icon representing the document type
Progress spinner: Indicator that a file is uploading
File preview cards must contain the file name as part of their accessible name. The name may be displayed as text in the card or included as the alternative text for the preview image. If the file name is displayed visually, the preview image's alternative text should be an empty string to avoid redundancy.
Multiple file preview cards must be grouped in a list. If the number of visual files exceeds the maximum display limit, a file preview card containing a "See more" button should be introduced as the last element in the list.
File preview cards themselves are not focusable or interactive.
Action buttons must have accessible names. They should make it obvious to the user what file they are taking action on, either through an explicit aria-label or sufficient DOM context. For example, a cancel icon button could have an aria-label of "Cancel upload: my-document.jpg", or an aria-label of simply "Cancel upload" when nested within a list item whose accessible name includes "my-document.jpg."
File preview cards themselves are not interactive, but a user should be able to interact with any of the file preview card's action buttons using a pointer device.
This section is not yet available.
If a file is in the process of uploading, it should include a progress indicator with appropriate alternative text, e.g. "Uploading..." or "Busy." It is not recommended to make the progress indicator a live region, as this can get noisy for multiple file upload. To convey upload error states, follow and group similar errors into .
View a fully styled example on our .
Their actions follow standard and keyboard interaction.
