eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Introduction
  • Terminology
  • Best Practices
  • Working Examples
  • Interaction Design
  • Developer Guide
  1. Messaging

File Preview Card

File preview cards show

PreviousConfirm DialogNextForm Validation

Last updated 3 months ago

Introduction

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.

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.

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

Interaction Design

Keyboard

File preview cards themselves are not focusable or interactive.

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.

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.

form validation best practices
inline notices
eBay Skin website
button
menu button
file input
Multiple preview cards with action buttons
4 file preview cards: 1) File preview card with an icon representation of a CSV, visible name "countries.csv," and menu icon button; 2) file preview card with photo of a frog and a menu icon button; 3) file preview card with a photo of a photographer and a menu icon button; 4) file preview card with a progress spinner and a Delete/Cancel icon button