File Preview Card Component

A card-like preview of the file being uploaded.

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.

The file-preview-card can be used to display file previews. A css grid layout is used to define the areas in which certain elements can be placed.

Terminology

We use the following terminology when discussing this pattern.

  • 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 Card Group ComponentFilter Chip Component