FileUpload

forms

Drag-and-drop file upload zone with click-to-browse, file list display, progress bars, size formatting, max size filtering, and disabled state. Token-driven styling with dashed border.

Import

typescript
import { FileUpload } from "packages/ui/src";

Props

FileUploadProps

PropTypeRequired
acceptstringNo
multiplebooleanNo
maxSizenumberNo
onFiles(files) => void, files?: FileUploadFile[], helpText?: string, disabled?: booleanNo

Examples

File Upload

Drag-and-drop file upload zone with file list and progress bars.

Interactive Upload

Drag & drop files here, or click to browse

With Progress Bars

Upload design assets and specifications

  • design-tokens.json12.1 KB
  • component-spec.pdf239.3 KB
  • screenshot.png1.7 MB

Disabled State

Upload is currently disabled

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionDrag-and-drop file upload zone with click-to-browse, file list display, progress bars, size formatting, max size filtering, and disabled state. Token-driven styling with dashed border.
PropsFileUploadProps (accept?: string, multiple?: boolean, maxSize?: number, onFiles?: (files) => void, files?: FileUploadFile[], helpText?: string, disabled?: boolean)
Statesidle, dragging, with-files, with-progress, disabled
A11y
  • Zone has role=button with aria-label
  • File input is aria-hidden
  • File list has aria-label
  • Progress bars have role=progressbar with aria-valuenow/min/max
Responsive
  • Full-width by default
  • Centered content in zone
Motion
  • Border color and background transition on drag/hover
Token Dependencies
  • components.fileUpload.background
  • components.fileUpload.borderColor
  • components.fileUpload.borderColorActive
  • components.fileUpload.borderRadius
  • components.fileUpload.borderStyle
  • components.fileUpload.padding
  • components.fileUpload.iconColor
  • components.fileUpload.iconSize
  • components.fileUpload.textColor
  • components.fileUpload.textFontSize
  • components.fileUpload.linkColor
  • components.fileUpload.linkHoverColor
  • components.fileUpload.fileNameColor
  • components.fileUpload.fileSizeColor
  • components.fileUpload.progressBackground
  • components.fileUpload.progressFill
  • components.fileUpload.progressHeight
Content SlotshelpText (string), files (FileUploadFile[])
CMS Bindings
  • Help text from CMS config
  • Accept types from CMS field
Test Cases
  • Renders upload zone
  • Shows help text
  • Zone has role=button
  • File input is hidden
  • Displays file list
  • Shows file size formatted
  • Progress bar has correct value
  • Passes className through