DropZone

File drop target that wraps arbitrary content. Shows an overlay on drag-over with optional file type validation via the accept prop.

import { DropZone } from 'phoundry-ui';

Basic

Drag files here to upload

Drop overlay appears automatically on drag-over

Show code

<DropZone ondrop={(files) => handleDrop(files)}>
  <div class="p-8 text-center border-2 border-dashed rounded-lg">
    <p>Drag files here to upload</p>
  </div>
</DropZone>

With Accept Filter (images only)

Drop images only (*.png, *.jpg, etc.)

Non-image files will show an error overlay

Show code

<DropZone
  ondrop={(files) => handleImages(files)}
  accept={['image/*']}
>
  <div class="p-8 text-center border-2 border-dashed rounded-lg">
    <p>Drop images only (*.png, *.jpg, etc.)</p>
  </div>
</DropZone>

Disabled

Uploads disabled — drag still shows browser cursor but this zone ignores it.

Show code

<DropZone ondrop={() => {}} disabled>
  <div class="p-6 text-center text-txt-tertiary">Uploads locked</div>
</DropZone>

Custom active overlay

Custom overlay replaces the default “Drop to upload” chrome.

Show code

<DropZone ondrop={handle} active={activeSnippet}>
  {#snippet children()}…{/snippet}
</DropZone>

{#snippet activeSnippet()}
  <div class="rounded-lg bg-accent-primary/20 p-4 text-center text-sm font-medium">Release to import</div>
{/snippet}

Props

Prop	Type	Default	Description
ondrop required	(files: File[], event: DragEvent) => void	—	Called with accepted files on drop.
accept	string[]	—	MIME types or extensions to accept (e.g. ['image/*', '.pdf']).
disabled	boolean	false	Disable the drop zone.
class	string	—	Additional CSS classes on the wrapper.
children	Snippet	—	Default content inside the drop zone.
active	Snippet	—	Custom overlay content shown during drag-over.

Usage tips

The default overlay shows “Drop to upload” on valid drag and “Invalid file type” when files don’t match accept.
Use the active snippet to fully customize the drag-over overlay.
The accept array supports MIME types ('image/*'), exact MIME ('application/pdf'), and extensions ('.csv').
Files that don’t match accept are silently filtered out of the ondrop callback.