Dropzone

An area to drop files or click to choose them. It checks the type, the size and the number of files, and hands them to onDrop. Uploading and listing the files is up to you.

General

Pass the files you want to keep from onDrop, which receives the ones that passed and the ones that did not.

Limits and rejected files

accept, maxSize and maxFiles decide what passes. A rejected file comes back with the reason: file-type, file-too-large or too-many-files.

Thumbnails

With thumbnails, the accepted files stay below the area as tiles. Each tile has the format of the file, a preview when it is an image, a file icon when it is not, and a button to remove it.

Custom content

The children replace the default text. Name the area with them, or with aria-label.

Disabled

A disabled area ignores drops and cannot open the file picker.

APIs

Dropzone.Props

Attribute	Description	Type	Accepted values	Default
onDrop	called with the accepted files and the rejected ones, from a drop or from the picker	`(accepted: File[], rejected: FileRejection[]) => void`	-	-
accept	types that pass, in the format of the `accept` of a file input	`string`	`'.pdf', 'image/*', 'image/png', ...`, separated by commas	-
multiple	accepts more than one file	`boolean`	-	`false`
maxSize	largest size of a file, in bytes	`number`	-	-
maxFiles	most files in one drop, with `multiple`	`number`	-	-
thumbnails	keeps the accepted files and shows them as tiles below the area	`boolean`	-	`false`
value	the files shown with `thumbnails`, to control them	`File[]`	-	-
onChange	called with the whole list when a file is added or removed, with `thumbnails`	`(files: File[]) => void`	-	-
removeLabel	name of the remove button of a file, for screen readers	`(file: File) => string`	-	`Remove <name>`
disabled	ignores drops and blocks the picker	`boolean`	-	`false`
...	native props, passed to the `input`	`InputHTMLAttributes`	`'name', 'aria-label', 'required', ...`	-

Rejected files

rejected is a list of { file, reason }. Each file gets only the first reason that applies, checked in this order:

• file-type: the file does not match accept.
• file-too-large: the file is bigger than maxSize.
• too-many-files: there are already as many accepted files as the limit, which is 1 without multiple and maxFiles with it.

onDrop is called on every drop or choice, even when every file was rejected. The file picker is cleared after each choice, so the same file can be chosen again.

Thumbnail behavior

• Format: the tile shows the extension of the file in capitals, like PNG or PDF. A file without an extension uses the subtype of its type.
• Preview: only images are shown as they are. Other formats, like PDF, CSV or ZIP, cannot be drawn by the browser, so they get a file icon.
• Limits: with multiple, new files are added to the ones already there, and maxFiles counts all of them. Without it, a new file replaces the current one.
• Control: the list is kept for you. Use value and onChange to own it, for example to clear it after an upload. onDrop is still called on every drop with the files of that drop.

Ref

The ref points at the file input. Extra props go to the input too, while className and style go to the wrapper of the area and the thumbnails.

The area is a label around a native file input, so it is reached with Tab and opened with Enter or Space, and its content names the input. A dragged file highlights the area, but the drag is only a shortcut: the picker does the same for people who use the keyboard or a screen reader. The thumbnails are a list, each with the name of the file as text and a remove button named after it, and the preview of an image is decorative. Show the result of onDrop as text on the page, for example the rejected files and why.

Edit this page on GitHub