I built another React file uploader. But this time, I built it for AI agents too.

Vasanth — Wed, 22 Jul 2026 14:30:12 +0000

When we started building the upload system for our new product, I did what every engineer does—I looked at the existing ecosystem first.

There are already some fantastic open source libraries.

react-dropzone is excellent if all you need is drag-and-drop.
Uppy is feature-rich and supports almost every upload scenario you can imagine.
FilePond is polished and battle-tested.

But our requirement was different.

We weren't looking for an upload ecosystem. We wanted a lightweight, headless uploader with a clean transport abstraction that could grow with our product.

So I started building one.

At first, it was simply an internal component.

Then I paused.

Do we really need another OSS library?

We're living in an era where AI can scaffold components from a prompt.

Need a file uploader?

Cursor, Claude Code, Copilot, or v0 can generate one in seconds.

So the obvious question became:

Do we actually need another open source library?

For a while, I thought maybe we didn't.

Then I realized I was asking the wrong question.

The better question was:

If we're building open source today, what should an AI-native library look like?

Most of the popular React upload libraries were created nearly a decade ago. They're fantastic libraries, but they were built for a world where humans were the only consumers of documentation.

Today, our documentation is read by both developers and AI agents.

That changes how I think about open source.

React MediaDrop

That thought became React MediaDrop.

Not because the React ecosystem needed another uploader, but because I wanted to experiment with what an AI-native open source library could look like.

The library itself intentionally stays simple.

Headless by design.
Lightweight.
No styling opinions.
A pluggable transport layer that isn't tied to any backend.

The goal isn't to compete with every upload library out there.

The goal is to provide a clean foundation that you can extend.

Today that means simple uploads.

Tomorrow it could mean resumable uploads, multipart uploads, cloud-specific adapters, or completely custom transport implementations.

Documentation isn't just for humans anymore

One thing I wanted to rethink was documentation.

If developers increasingly use AI assistants to integrate libraries, then documentation should be discoverable and consumable by those assistants—not just by humans browsing a website.

So the project was built with that philosophy from day one.

The documentation is generated using Blume, another OSS project designed for both humans and AI.

Beyond traditional docs, React MediaDrop also exposes:

llms.txt
AI-friendly documentation
Context7 integration so agents can always discover the latest documentation
Skills that can be added through npx skills add autorender/react-mediadrop

The idea isn't to replace documentation with prompts.

It's to give AI agents structured knowledge so they're more likely to use the library correctly instead of guessing.

Built for modern development workflows

Whether you're:

prompting v0 to scaffold a React application,
asking Claude Code to integrate uploads,
using Cursor,
or writing every line yourself,

the library should fit naturally into your workflow.

Looking ahead

React MediaDrop intentionally starts small.

There's nothing revolutionary about uploading files.

But I think there's room to rethink how libraries are built and documented for the next generation of software development.

I'd love to see the project evolve with:

resumable uploads
cloud storage adapters
additional transport implementations
community plugins
richer AI skills

Try it out

React MediaDrop is open source and already on npm:

npm: npm install react-mediadrop
GitHub: https://github.com/autorender/react-mediadrop
Docs: https://mediadrop.dev

The hook is headless, so you own the markup. Here's the basic setup:

import { useMediaDrop } from "react-mediadrop";

const { getRootProps, getInputProps, files } = useMediaDrop({
  restrictions: { accept: ["image/png", "image/jpeg"], maxFiles: 5 },
});

And uploading with a pluggable transport, plus concurrency and retries:

import { useMediaDrop } from "react-mediadrop";
import { createXhrUploadTransport } from "react-mediadrop/xhr-upload";

const { files, uploadAll } = useMediaDrop({
  transport: createXhrUploadTransport({ endpoint: "/api/upload" }),
  concurrency: 3,
  retries: 2,
});

Prefer a prebuilt component? Install via the shadcn registry

No directory registration needed—it works today, straight from the repo:

pnpm dlx shadcn@latest add autorender/react-mediadrop/dropzone
# or
npx shadcn@latest add autorender/react-mediadrop/dropzone

Final thoughts

React MediaDrop isn't trying to reinvent file uploads.

It's an experiment.

An experiment in building a React library that's lightweight, headless, extensible—and designed for a world where both humans and AI agents are first-class users.

Maybe that's where open source is heading.

I'd love to hear what you think.

DEV Community: Vasanth