Introduction

A hooks-first, headless file uploader for React

react-mediadrop is a headless, hooks-first file uploader for React: intake, validation, and upload (queue, concurrency, retry, cancel) via a single useMediaDrop hook — the same getRootProps/getInputProps shape you already know from react-dropzone, with upload built in. Published to npm as react-mediadrop.

You can use react-mediadrop for:

• A drag-and-drop upload zone with your own markup and styling
• Client-side file validation (type, size, count) before anything uploads
• A queue that uploads multiple files with concurrency, retry, and cancel
• Upload progress and per-file status rendered in your own UI

Headless-first

You own the markup. getRootProps/getInputProps return plain props to spread onto whatever elements you already have — no prebuilt widget, no dashboard, nothing to override. Style it exactly like the rest of your app.

What’s here today

Core handles file intake, drag/drop, and validation. Upload builds on top of it: a pluggable transport contract, a queue with concurrency/retry/ cancel, and a reference XHR transport.

Not yet: pause/resume, remote-provider import, OAuth, image transforms, a prebuilt widget. See Roadmap for what’s next.

Which transport should I use?

If your files are small enough that a dropped connection losing all progress is acceptable, plain XHR covers it.