Skip to content
Mantle JS

Upload dropzone

A live demo against a mocked server in your browser — the block is the registry's own source.

Install

Section titled “Install”
Terminal window
npx shadcn add @mantle/upload-dropzone

Needs a React Aria shadcn project and the @mantle registry in components.json — see Install. The block lands in components/mantle/upload-dropzone.tsx, yours to edit.

Usage

Section titled “Usage”

Point service at a service whose create runs @mantlejs/storage’s handleUpload() hook — or pass id to upload into an existing record through its patch.

import { UploadDropzone } from "@/components/mantle/upload-dropzone";


<UploadDropzone
  service="attachments"
  acceptedFileTypes={["image/*"]}
  maxFileSize={5_000_000}
  onUploaded={(attachment) => console.log("stored", attachment)}
/>;
  • React Aria DropZone + FileTrigger: the zone is keyboard-focusable, pasting works, and the picker is a real button.
  • Type and size are checked before upload, with the reason shown per file; the server’s own limits still apply.
  • Each file goes through client.service(service).upload(), so it gets the client’s bearer token, its 401 refresh-and-retry, and typed MantleClientErrors, with progress events.

View the source.