File Preview Card
File preview cards show
Introduction
The file preview card pattern often pairs with the file input 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.
Terminology
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
Best Practices
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.
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 form validation best practices and group similar errors into inline notices.
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.
Working Examples
View a fully styled example on our eBay Skin website.
Interaction Design
Keyboard
File preview cards themselves are not focusable or interactive.
Their actions follow standard button and menu button keyboard interaction.
Screen Reader
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."
Pointer
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.
Developer Guide
This section is not yet available.
Last updated