File Upload

FileUpload is a drag-and-drop file picker. It renders a dashed dropzone with a browse button, then lists the accepted files — each with an optional image thumbnail, name, human-readable size, and a remove button. Drop, click-to-browse, keyboard, and the full ARIA model come from Ark UI's FileUpload machine. It implements the kit's value-based form-control contract — onChange hands you the accepted File[], and name wires the hidden native input into form submission. Label, description, and error are built in via Field.

import { FileUpload } from '@42-central/ui-react/file-upload';

<FileUpload label="Submission" />

Playground

<Component
  maxFiles={1}
  size="md"
  label="Submission"
/>

Multiple files

maxFiles defaults to 1 (single-file). Raise it to accept several at once — each accepted file gets its own row.

Restricting types

Gate the picker with accept — a MIME map ({ 'image/*': ['.png', '.jpg'] }) or a glob string ('image/*'). Rejected files are dropped silently. maxFileSize (in bytes) caps each file's size.

<FileUpload label="Avatar" accept="image/*" />

<FileUpload
  label="Documents"
  accept={{ 'application/pdf': ['.pdf'] }}
  maxFileSize={5 * 1024 * 1024}
/>

Sizes & colors

color accents the dropzone while a file is being dragged over it (and the browse button's outline). The dropzone is otherwise palette-independent.

<FileUpload label="Brand" color="brand" />
<FileUpload label="Green" color="green" />
<FileUpload label="Purple" color="purple" />

Label, description & error

FileUpload wraps itself in Field, so label / description / error / required work out of the box and wire the aria-* relationships. Passing error flips the dropzone to the invalid (red) state.

<FileUpload
  label="Project files"
  description="Up to 3 files, 5 MB each."
  maxFiles={3}
/>

<FileUpload label="CV" error="A file is required" />

Controlled

Drive the accepted files from state. onChange hands you the File[] whenever the selection changes.

'use client';
import { useState } from 'react';
import { FileUpload } from '@42-central/ui-react/file-upload';

export function AvatarUpload() {
  const [files, setFiles] = useState<File[]>([]);
  return (
    <FileUpload
      label="Avatar"
      accept="image/*"
      value={files}
      onChange={setFiles}
    />
  );
}

Forms

FileUpload renders a hidden native <input type="file">, so a name wires it into native <form> submission and FormData — no controlled state required.

<form action={save}>
  <FileUpload name="submission" label="Submission" />
</form>

API

Accessibility

• Built on Ark UI's FileUpload machine: the dropzone is a labelled button (Enter / Space opens the file dialog), and drop / drag-over states are announced.
• A hidden native <input type="file"> backs form submission; pass name to include it.
• Each accepted file's remove button has an aria-label (Remove <filename>).
• invalid (or error) flips the dropzone to the red state; label / description / error associations are wired via the built-in Field.
• testId renders as data-testid on the visible dropzone surface — never the hidden native <input type="file">. See the Testing guide.
• RTL is honored via the document dir.

Changelog