Mediadrop

Overview

Mediadrop is a set of drag-and-drop file upload blocks for React, distributed through the shadcn registry and built on react-mediadrop, an MIT-licensed, hooks-first headless uploader. A single useMediaDrop hook covers the whole upload lifecycle (drag, validate, queue, retry and cancel), while the markup and styles stay in the consuming project.

The registry provides four ready-made blocks that apply the hook to common upload patterns, from a basic dropzone to direct uploads to Amazon S3 with presigned URLs. The project is brought to users by Autorender.

Features

• Dropzone: A drag-and-drop upload block with per-file progress and cancel.
• Avatar uploader: A circular single-image picker with click or drag to replace and upload progress.
• Multi-file upload form: A review list with an explicit submit step, plus per-file progress, cancel and retry.
• Direct-to-S3 upload: Uploads through a presigned PUT URL supplied per file, using the xhr-upload transport.
• Validation: Restrictions sort files into acceptedFiles and rejectedFiles.
• File previews: Each file carries a preview URL and a removeFile(id) helper.
• Drag state: isDragActive updates as soon as a file enters the drop area.

Tech stack

• React, react-mediadrop, shadcn CLI registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @mediadrop/component-name