DropZone 
Edit
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.
Usage Usage
import { DropZone } from '@wordpress/components';
import { useState } from '@wordpress/element';
const MyDropZone = () => {
const [ hasDropped, setHasDropped ] = useState( false );
return (
<div>
{ hasDropped ? 'Dropped!' : 'Drop something here' }
<DropZone
onFilesDrop={ () => setHasDropped( true ) }
onHTMLDrop={ () => setHasDropped( true ) }
onDrop={ () => setHasDropped( true ) }
/>
</div>
);
}
Props Props
The component accepts the following props:
className className
A CSS class to be appended after the default components-drop-zone class.
- Type:
String - Default:
undefined
label label
A string to be shown within the drop zone area.
- Type:
String - Default:
Drop files to upload
onFilesDrop onFilesDrop
The function is called when dropping a file into the DropZone. It receives an array of dropped files as an argument.
- Type:
Function - Required: No
- Default:
noop
onHTMLDrop onHTMLDrop
The function is called when dropping a file into the DropZone. It receives the HTML being dropped as an argument.
- Type:
Function - Required: No
- Default:
noop
onDrop onDrop
The function is generic drop handler called if the onFilesDrop or onHTMLDrop are not called. It receives the drop event object as an argument.
- Type:
Function - Required: No
- Default:
noop