Attachment drop zone

Accept files dropped onto a region.

Drop files here

Drop files to attach

View code

import { useState } from "react";
import { AttachmentDropZone } from "@stack/ui/attachment-drop-zone";

export default function Example() {
  const [names, setNames] = useState<string[]>([]);
  return (
    <AttachmentDropZone.Root
      onFiles={(files) => setNames(files.map((file) => file.name))}
    >
      <div className="grid min-h-32 place-items-center">
        <p role="status">
          {names.length ? names.join(", ") : "Drop files here"}
        </p>
      </div>
      <AttachmentDropZone.Overlay />
    </AttachmentDropZone.Root>
  );
}

Usage

import { useState } from "react";
import { AttachmentDropZone } from "@stack/ui/attachment-drop-zone";

Validate file types and sizes in your application. Provide a file picker alongside drop support in production.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

AttachmentDropZone.Root

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
onDragOverCapture	DragEventHandler<HTMLDivElement>	No	Handle drag-over events before the built-in attachment handler.
onDropCapture	DragEventHandler<HTMLDivElement>	No	Handle drop events before the built-in attachment handler.
onFiles	(files: File[]) => void	Yes	Receive files selected, pasted, or dropped into the component.
disabled	boolean	No	Disable interaction. Default: false.

AttachmentDropZone.Overlay

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.