Dropzone

The Dropzone component adds drag, drop, and paste handling to a container. It passes the selected FileList to onChange and applies Payload's drop-target styles.

Import

1import { Dropzone } from '@payloadcms/ui'

Basic usage

or drag and drop files here

Loading component example…

Dropzone does not render a file input or open the system file picker. Render those controls as children when users should be able to browse for files in addition to dropping them.

When multipleFiles is disabled, dropping more than one file passes only the first file to onChange.

Common props

These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content and file-selection controls in the target.
`onChange` *	`(files: FileList) => void`	—	Runs when files are dropped, pasted, or supplied.
`multipleFiles`	`boolean`	`false`	Allows more than one file to be returned.
`disabled`	`boolean`	`false`	Disables drag, drop, and paste listeners.
`dropzoneStyle`	`'default' \| 'none'`	`'default'`	Enables or removes Payload's drop-target styles.
`className`	`string`	—	Adds a class to the dropzone container.

* An asterisk denotes that a prop is required.

Was this page helpful?

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

Dropzone

Import

Basic usage

Common props

ErrorPill