FileUpload

Alpha

An accessible file upload with drag-and-drop, file validation, and screen reader announcements for file additions and errors.

Import

import { FileUpload } from "@compa11y/react";

Usage

Example.tsx

import { FileUpload, Button, Text } from "@compa11y/react";

function AvatarUpload() {
  return (
    <FileUpload accept="image/*" maxSize={5_000_000}>
      <FileUpload.Dropzone>
        <Text size="sm" color="muted">
          Drag an image here, or
        </Text>
        <FileUpload.Trigger>
          <Button variant="outline" size="sm">Browse files</Button>
        </FileUpload.Trigger>
        <Text size="xs" color="muted">Max 5MB. JPG, PNG, or GIF.</Text>
      </FileUpload.Dropzone>
      <FileUpload.FileList />
    </FileUpload>
  );
}

Features

Drag-and-drop dropzone with aria-dropeffect
File type, size, and count validation
Accessible file list with remove buttons
Screen reader announcements for add/remove/error
Compound component API for full layout control
Keyboard accessible: Enter/Space to open file picker

Props

FileUpload component props
Prop	Type	Default	Description
`accept`	`string`	-	Accepted file types (e.g. '.jpg,.png,image/*')
`multiple`	`boolean`	`false`	Allow multiple files
`maxSize`	`number`	-	Maximum file size in bytes
`disabled`	`boolean`	`false`	Disables the upload
`onFilesChange`	`(files: FileUploadFile[]) => void`	-	Called when files are added or removed
`error`	`string`	-	Error message

Sub-components

FileUpload.Dropzone

FileUpload.Dropzone props
Prop	Type	Default	Description
`children`*	`ReactNode`	-	Dropzone content

FileUpload.Trigger

FileUpload.Trigger props
Prop	Type	Default	Description
`children`*	`ReactNode`	-	Trigger button content

FileUpload.FileList

FileUpload.FileList props
Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom file list rendering

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for FileUpload
Key	Action
`Enter / Space`	Opens the file picker dialog
`Tab`	Moves between trigger, file items, and remove buttons