FileUpload

Drag-and-drop dropzone with click-to-browse fallback. Validates count + size + accept, shows a per-file row with size and remove button. Controlled or uncontrolled, no runtime dependency.

Drag files here

or Click to browse

Images up to 2 MB · up to 5 files

Usage

import { FileUpload } from '@bwo-ui/react';

const [files, setFiles] = useState<File[]>([]);

<FileUpload
  value={files}
  onValueChange={setFiles}
  multiple
  maxFiles={5}
  maxSize={2 * 1024 * 1024}
  accept="image/*"
  hint="Images up to 2 MB · up to 5 files"
/>

Props

Prop	Type	Default	Description
`value`	`File[]`	—	Controlled file list.
`defaultValue`	`File[]`	`[]`	Uncontrolled default.
`onValueChange`	`(files: File[]) => void`	—	Fires when files are added or removed.
`multiple`	`boolean`	`false`	Allow multiple files.
`accept`	`string`	—	MIME types or extensions, comma-separated.
`maxFiles`	`number`	—	Maximum number of files.
`maxSize`	`number`	—	Maximum size per file in bytes.
`hint`	`ReactNode`	—	Hint text under the dropzone.
`heading`	`ReactNode`	—	Override the heading text.
`cta`	`ReactNode`	`'Click to browse'`	Override the click-to-browse copy.