Drop Zone Membrane

A responsive membrane drop zone with shadcn attachments, upload progress, processing, retry and cancellation.

Install with the shadcn CLI

npxnpx shadcn@4.21.5 add @cavemio/drop-zone-membrane

First install? Configure @cavemio once

Run npx shadcn@4.21.5 init if shadcn is not set up, then merge this entry into the registries field in your existing components.json. Keep your other settings and registries.

components.json

{
  "registries": {
    "@cavemio": "https://registry.cavemio.dev/r/cavemio-{name}.json"
  }
}

Overview

A responsive membrane drop zone with shadcn attachments, upload progress, processing, retry and cancellation.

The preview simulates upload progress locally; supply onUpload for a real service. Without it, selected files remain ready to upload.

import { DropZoneMembrane } from "@/components/drop-zone-membrane";

<DropZoneMembrane accept="image/*,.pdf" maxSize={10_000_000} maxFiles={2} onFilesChange={setFiles} onUpload={uploadFile} />

Props

Prop	Type	Description
`onUpload`	`DropZoneMembraneUpload`	Optional. Uploads one file: report progress, honour the signal, resolve when done or throw to show an error with Retry.
`autoUpload`	`boolean`	Optional. Start uploads on selection. False exposes an Upload action on each ready file.
`onFilesChange`	`(files: File[]) => void`	Optional. The files currently in the list, after every add and remove.
`accept`	`string`	Optional. Like an input's accept: MIME types, wildcards and extensions, e.g. "image/*,.pdf".
`maxSize`	`number`	Optional. Largest file in bytes.
`maxFiles`	`number`	Optional. Maximum number of files accepted in the list.
`multiple`	`boolean`	Optional. One file at a time: a new drop replaces it.
`title`	`string`	Optional. The resting label.
`hint`	`string`	Optional. File requirements in the tray footer, e.g. "PNG, JPG or PDF, up to 10 MB".
`disabled`	`boolean`	Optional. Disable user interaction.
`ref`	`React.Ref<DropZoneMembraneHandle>`	Optional. Ref exposing the file-picker controls.