1. Components
  2. Drag and drop
  3. Dropzone

Dropzone

A drop zone is an area into which one or multiple objects can be dragged and dropped.

Aria docsReport an issueEdit this page
<DropZone><UploadIcon /></DropZone>

Installation

npx dotui-cli@latest add drop-zone

Label

A visual label can be provided for the DropZone using the <DropZoneLabel> component, or a hidden label using aria-label prop.

Drag and drop files here
<DropZone aria-label="drag and drop files here">
  <UploadIcon />
</DropZone>
<DropZone>
  <UploadIcon />
  <DropZoneLabel>Drag and drop files here</DropZoneLabel>
</DropZone>

Events

DropZone supports user interactions 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 interacts with the dropzone.

Component A
Drag me
Component B
Drag me
Droppable
<Draggable text="Component A" />
<Draggable text="Component B" />
<DropZone
  onDrop={async (e) => {
    {/* handle drop event */}
  }}
>
  <DropZoneLabel>Droppable</DropZoneLabel>
</DropZone>

File trigger

To allow the selection of files from the user's device, pass FileTrigger as a child of DropZone.

Drag and drop files here
<DropZone>
  <UploadIcon />
  <DropZoneLabel>Drag and drop files here</DropZoneLabel>
  <FileTrigger>
    <Button>Select files</Button>
  </FileTrigger>
</DropZone>

Visual feedback

A dropzone displays visual feedback to the user when a drag hovers over the drop target by passing the getDropOperation function. If a drop target only supports data of specific types (e.g. images, videos, text, etc.), then it should implement the getDropOperation prop and return "cancel" for types that aren't supported. This will prevent visual feedback indicating that the drop target accepts the dragged data when this is not true.

Drop files here
<DropZone
  getDropOperation={(types) => (types.has("image/png") ? "copy" : "cancel")}
>
  {dropped ? "Successful drop!" : "Drop files here"}
</DropZone>

Options

Disabled

Use the isDisabled prop to disable the drop zone.

Drag and drop files here
<DropZone isDisabled>
  <UploadIcon />
  <DropZoneLabel>Drag and drop files here</DropZoneLabel>
</DropZone>

API Reference

DropZone

PropTypeDefaultDescription
getDropOperation(types: DragTypes, allowedOperations: DropOperation[]) => DropOperation-A function returning the drop operation to be performed when items matching the given types are dropped on the drop target.
isDisabledboolean-Whether the drop target is disabled. If true, the drop target will not accept any drops.
childrenReactNode | (values: DropZoneRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode-The children of the component. A function may be provided to alter the children based on component state.
classNamestring-The CSS className for the element.
styleCSSProperties | (values: DropZoneRenderProps & {defaultStyle: CSSProperties}) => CSSProperties-The inline style for the element. A function may be provided to compute the style based on component state.
EventTypeDescription
onDropEnter(e: DropEnterEvent) => voidHandler that is called when a valid drag enters the drop target.
onDropMove(e: DropMoveEvent) => voidHandler that is called when a valid drag is moved within the drop target.
onDropExit(e: DropExitEvent) => voidHandler that is called when a valid drag exits the drop target.
onDrop(e: DropEvent) => voidHandler that is called when a valid drag is dropped on the drop target.
onHoverStart(e: HoverEvent) => voidHandler that is called when a hover interaction starts.
onHoverEnd(e: HoverEvent) => voidHandler that is called when a hover interaction ends.
onHoverChange(isHovering: boolean) => voidHandler that is called when the hover state changes.
Data attributeDescription
[data-hovered]Whether the dropzone is currently hovered with a mouse.
[data-focused]Whether the dropzone is focused, either via a mouse or keyboard.
[data-focus-visible]Whether the dropzone is keyboard focused.
[data-drop-target]Whether the dropzone is the drop target.
[data-disabled]Whether the dropzone is disabled.

Accessibilty

Keyboard interactions

KeyDescription
TabMoves focus to the dropzone.
EnterActivates the dropzone.

Last updated on 10/11/2024

Color PickerAlert
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.