Automattic Design System

DropZone

DropZone is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.

import { DropZone } from '@wordpress/components';

LinksPermalink to this section

View on Storybook

View source on GitHub

PropsPermalink to this section

Name	Default	Description
`className`		`string` A CSS `class` to give to the wrapper element.
`icon`	`upload`	`Element` An icon to be shown within the drop zone area.
`label`	`__( 'Drop files to upload' )`	`string` A string to be shown within the drop zone area.
`onDrop`		`(event: DragEvent) => void` The function is generic drop handler called if the `onFilesDrop` or `onHTMLDrop` are not called. It receives the drop `event` object as an argument.
`onFilesDrop`		`(files: File[]) => void` The function is called when dropping a file into the `DropZone`. It receives an array of dropped files as an argument.
`onHTMLDrop`		`(html: string) => void` The function is called when dropping HTML into the `DropZone`. It receives the HTML being dropped as an argument.
`isEligible`	`() => true`	`(dataTransfer: DataTransfer) => boolean` A function to determine if the drop zone is eligible to handle the drop data transfer items.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = ( props ) => {
	return (
		<div
			style={ {
				background: 'lightgray',
				padding: 32,
				position: 'relative',
			} }
		>
			Drop something here
			<DropZone { ...props } />
		</div>
	);
};