File Dropzone

A large area to drop files on (web) or tap to pick them, with the files listed below.

Stable

Web

iOS

Android

@advui/core

Source

Basic

Preview

Code

Drop files here or click to browseImages or PDFs, up to 10 MB each

quarterly-report.pdf2.3 MB

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { FileDropzone } from '@advui/core'

<FileDropzone
  accept="image/*,.pdf"
  maxSize={10_000_000}
  description="Images or PDFs, up to 10 MB each"
  onValueChange={setFiles}
/>

API reference

FileDropzone

Takes File Upload’s `value`, `onValueChange`, `accept`, `maxSize`, `maxFiles`, `onReject` and `pickFiles`.

Prop	Type	Default	Description
`multiple`	`boolean`	`true`	Keep several files (the default for a dropzone).
`title`	`ReactNode`	`'Drop files here or click to browse' / 'Tap to choose files'`	Main line; also the accessible name.
`description`	`ReactNode`	—	Second line, e.g. allowed types and size.
`invalid`	`boolean`	`false`	Error styling and `aria-invalid`.
`disabled`	`boolean`	`false`	Not focusable or editable.

Accessibility

The zone is one button named by its text, so keyboard and screen-reader users open the picker instead of dragging.
Dropped files are checked against accept, maxSize and maxFiles like picked ones.
The picked files are a list with named remove buttons.

Keyboard interactions
Key	Action
`Enter / Space`	Opens the file picker.

Platform notes

Web

Files dragged over the zone highlight it; dropping adds them.

iOS

No drag and drop: the zone is a large button that opens the picker from setFilePicker.