FileUpload

molecules

Drop zone + file input. Drag-over visual, file list with progress, type/size validation, preview thumbnails.

ARIA Role: button

Demo

Demo for FileUpload (molecules)

Drop zone + file input. Drag-over visual, file list with progress, type/size validation, preview thumbnails.

Props

PropTypeRequiredDefaultDescription
labelstringYes—

TypeScript Interface

interface FileUploadProps {
  accept?: string;
  multiple?: boolean;
  maxSize?: number;
  maxFiles?: number;
  onUpload: (files: File[]) => Promise<void>;
  label: string;
  helperText?: string;
  error?: string;
}

Assertions (NASA Rule 5)

  • [type]accept must be MIME pattern (NASA Rule 7 — validate)(NASA Rule 7)
  • [aria]Drop zone has role='button' tabindex='0'; file list has role='list' with status updates(WCAG 4.1.3)

Usage

Import

import { Fileupload } from '@epasslive/design-system'

Basic

<Fileupload />

With Variants

<Fileupload variant="primary" size="md" />