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. To work properly this components needs to be wrapped in a DropZoneProvider.

Usage Usage

import { DropZoneProvider, DropZone } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MyDropZone = withState( {
    hasDropped: false,
} )( ( { hasDropped, setState } ) => (
    <DropZoneProvider>
        <div>
            { hasDropped ? 'Dropped!' : 'Drop something here' }
            <DropZone 
                onFilesDrop={ () => setState( { hasDropped: true } ) }
                onHTMLDrop={ () => setState( { hasDropped: true } )  }
                onDrop={ () => setState( { hasDropped: true } ) } 
            />
        </div>
    </DropZoneProvider>
) );

Top ↑

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

Top ↑

label label

A string to be shown within the drop zone area.

  • Type: String
  • Default: Drop files to upload

Top ↑

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

Top ↑

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

Top ↑

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