Example
Patterns
Labelling
A visual label should be provided to DropZone using either a Text or Heading element attributed with slot="label".
<DropZone> <Heading slot="label">Drag and drop here</Heading></DropZone>Alternatively, an aria-label or aria-labelledby prop must be passed to identify the element to assistive technology.
<DropZone aria-label="Drag and drop here"> <Icon src={imagePlusIcon} /></DropZone>Render prop
You can pass a function to children, which will provide access to state.
Events
DropZone supports drop operations via mouse, keyboard, and touch. You can handle all of these via the onDrop prop. In addition, the onDropEnter, onDropMove, and onDropExit events are fired as the user enters and exits the dropzone during a drag operation.
The following example uses an onDrop handler to update the filled status stored in React state.
File trigger
A FileTrigger is commonly paired with a DropZone to allow a user to choose files from their device.
The example below allows multiple files with the allowsMultiple prop, but only certain images are accepted by providing the acceptedFileTypes prop.