Introduction

react-mediadrop is a file intake, validation, and upload engine for React, 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.