---
name: "@mediadrop"
slug: "mediadrop"
description: "Drag-and-drop file upload blocks for React built on react-mediadrop — dropzone, avatar uploader, multi-file upload form, and direct-to-S3 upload."
category: "Forms"
tags: ["blocks", "forms", "loaders", "media"]
framework: "react"
license: "MIT"
author: "autorender"
website: "https://www.mediadrop.dev"
github: "https://github.com/autorender/react-mediadrop"
registry: "https://www.mediadrop.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 26
component_count: 4
generated_at: "2026-09-05T09:50:59.044Z"
---

# @mediadrop

Drag-and-drop file upload blocks for React built on react-mediadrop — dropzone, avatar uploader, multi-file upload form, and direct-to-S3 upload.

## Links

- Website: https://www.mediadrop.dev
- GitHub: https://github.com/autorender/react-mediadrop
- Registry JSON: https://www.mediadrop.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/mediadrop
- This file: https://sh4dcn.vercel.app/md/mediadrop.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.mediadrop.dev/r/registry.json
pnpm dlx shadcn@latest add https://www.mediadrop.dev/r/registry.json
bunx shadcn@latest add https://www.mediadrop.dev/r/registry.json
# clone the source repo
git clone https://github.com/autorender/react-mediadrop.git
# fetch the raw registry index
curl -s https://www.mediadrop.dev/r/registry.json
```

## Components (4)

| name | type | description | install |
| --- | --- | --- | --- |
| dropzone | registry:block | Drag-and-drop file upload block built on react-mediadrop's useMediaDrop hook, with per-file progress and cancel. | `npx shadcn@latest add https://www.mediadrop.dev/r/dropzone.json` |
| avatar-uploader | registry:block | Circular single-image avatar picker built on react-mediadrop's useMediaDrop hook, with click/drag replace and upload progress. | `npx shadcn@latest add https://www.mediadrop.dev/r/avatar-uploader.json` |
| multi-file-upload-form | registry:block | Multi-file picker with a review list and an explicit submit step — add files, then upload — with per-file progress, cancel, and retry. | `npx shadcn@latest add https://www.mediadrop.dev/r/multi-file-upload-form.json` |
| s3-direct-upload | registry:block | Direct-to-S3 upload block using a presigned PUT URL you supply per file, built on react-mediadrop's xhr-upload transport. | `npx shadcn@latest add https://www.mediadrop.dev/r/s3-direct-upload.json` |

## For AI agents

```text
You are adding components from @mediadrop to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/mediadrop.md) for the component list.
2. Fetch the machine-readable index: https://www.mediadrop.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: mediadrop).
```