useDropzone

Drag & drop zone with a prop-getter API. Does not upload; it only collects files and hands them to onDrop.

function useDropzone(options: DropzoneOptions): DropzoneState

Pair it with useUploader:

const dropzone = useDropzone({
  onDrop: uploader.addFiles,
  accept: ['image/*', '.pdf'],
});

Options

Option	Type	Default	Description
onDrop	(files: File[]) => void	required	Accepted files
onDropRejected	(rejections) => void	—	Rejected files from this event
accept	string[]	—	MIME / extension filter
multiple	boolean	true	File dialog allows multiple
disabled	boolean	false	Ignore click, drag, and input
noClick	boolean	false	Drag only; no click-to-open
noDrag	boolean	false	Click only; ignore drag
maxFiles	number	—	Cap for this drop/select only
maxFileSize	number	—	Max bytes
minFileSize	number	—	Min bytes
validator	FileValidator	—	Custom validation

Dropzone maxFiles does not know about files already in the uploader. Enforce the global cap on useUploader.

Returns

Property	Type	Description
getRootProps	(props?) => props	Spread on the container
getInputProps	(props?) => props	Spread on a hidden <input>
isDragActive	boolean	Pointer is dragging over the root
isDragAccept	boolean	Dragged items look accepted
isDragReject	boolean	Dragged items look rejected
open	() => void	Open the file dialog

getInputProps sets type="file", display: none, accept, multiple, and a ref. You still need to render <input {...getInputProps()} /> inside the root (or anywhere) so click-to-select works.

Example

const dropzone = useDropzone({
  onDrop: uploader.addFiles,
  onDropRejected: (rejections) => console.warn(rejections),
  accept: ['image/*'],
  maxFileSize: 10 * 1024 * 1024,
});

const className = [
  'dropzone',
  dropzone.isDragActive && 'is-active',
  dropzone.isDragReject && 'is-reject',
]
  .filter(Boolean)
  .join(' ');

return (
  <div {...dropzone.getRootProps()} className={className}>
    <input {...dropzone.getInputProps()} />
    {dropzone.isDragReject
      ? 'These files are not allowed'
      : dropzone.isDragActive
        ? 'Drop the files here'
        : 'Drag & drop, or click to browse'}
  </div>
);

The root is tabIndex={0} and opens the dialog on Enter / Space. getRootProps / getInputProps merge extra props you pass in; library handlers win for drag/drop/change.

During drag, accept/reject highlighting uses MIME types from dataTransfer.items. Extension-only accept patterns (.pdf) are applied on drop, not reliably while hovering. See Validation.