A react-dropzone-uploader alternative

react-dropzone-uploader's last release came out in November 2019, and on React 19 it doesn't render at all. Upload Dropzone is a free, MIT-licensed dropzone with a progress ring and a Retry button on every file, and it takes the same kind of upload function.

Get it free

Open the demoReact · Tailwind · TypeScript

Use it in Next.js

app/upload/Uploader.tsx

"use client";
// Before: <Dropzone getUploadParams={() => ({ url: "/api/upload" })} onChangeStatus={...} onSubmit={...} />
import { UploadDropzone, type Uploader, type UploadItem } from "@/components/upload-dropzone/UploadDropzone";

// What getUploadParams used to return: where the file goes and what rides along with it.
function uploadParams(file: File) {
  return { url: "/api/upload", fields: { name: file.name }, headers: {} as Record<string, string> };
}

// XMLHttpRequest, because fetch still has no upload progress event.
const upload: Uploader = (file, onProgress, signal) =>
  new Promise<void>((resolve, reject) => {
    const { url, fields, headers } = uploadParams(file);
    const body = new FormData();
    for (const [key, value] of Object.entries(fields)) body.append(key, value);
    body.append("file", file);

    const xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    for (const [key, value] of Object.entries(headers)) xhr.setRequestHeader(key, value);
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) onProgress((e.loaded / e.total) * 100);
    };
    xhr.onload = () => (xhr.status < 300 ? resolve() : reject(new Error(`Upload failed (${xhr.status})`)));
    xhr.onerror = () => reject(new Error("Network error"));
    xhr.onabort = () => reject(new DOMException("Upload cancelled", "AbortError"));
    // removing a row aborts its upload, the way RDU's cancel button did
    signal.addEventListener("abort", () => xhr.abort());
    xhr.send(body);
  });

export default function Uploader() {
  return (
    <UploadDropzone
      upload={upload}
      accept="image/*,audio/*,video/*"
      maxSize={20 * 1024 * 1024}
      hint="up to 20 MB each"
      chips={["JPG", "PNG", "MP3", "MP4"]}
      onAllDone={(items: UploadItem[]) => {
        // RDU's onSubmit got the finished files; here they arrive once every row is done
        console.log(items.filter((i) => i.status === "done").map((i) => i.name));
      }}
    />
  );
}

app/api/upload/route.ts

import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const form = await req.formData();
  const file = form.get("file");
  if (!(file instanceof File)) return NextResponse.json({ error: "No file" }, { status: 400 });

  // hand the file to S3, R2, Supabase Storage or your disk here
  const bytes = Buffer.from(await file.arrayBuffer());
  return NextResponse.json({ name: file.name, size: bytes.length });
}

Good to know

Where react-dropzone-uploader stands: npm's latest is 2.11.0, from November 13, 2019. The GitHub repo (fortana-co/react-dropzone-uploader) isn't archived, but its last push was April 1, 2024 and it has 154 open issues. npm still counted 15,781 downloads in the week of October 16 to 22, 2026.
Why it breaks on React 19: its dist file ships its own copy of React 16.8.6, so the elements it makes carry the old element tag. We rendered it with react 19.1.1 on October 26, 2026 and React threw "Objects are not valid as a React child". Its peer range (react >=16.2.0) doesn't warn you, so npm installs it without a word.
When the free option fits better: if you only need the drop target and the file picker, react-dropzone is the maintained one. Version 20.1.4 came out on October 17, 2026, it peers on React 18 and up, and npm counted 8,639,511 downloads that same week. It has no upload or progress UI, so you'd build the list yourself.
Upload Dropzone is that list: drop or pick files, each row gets a progress ring, failed rows shake and get Retry, and removing a row aborts its upload. A total bar at the top counts everything. It's free under MIT and installs with one shadcn command.
There are no image or video thumbnails. Each row shows a coloured type badge, the name and the size. RDU's previews were its strong point, so if you need thumbnails, add them to the row in your copy of the file.
On Vercel a function's request body is capped at 4.5 MB, so the route above only suits small files there. For bigger ones, upload straight to storage with a presigned URL; the S3 guide under More for React shows that with this dropzone.
Type-checked on October 26, 2026 with TypeScript 5.9.3 against next 15.5.28, react 19.1.1 and the registry's UploadDropzone.tsx, with framer-motion 14.6.0. We didn't run the upload against a live server.

What each react-dropzone-uploader prop becomes

getUploadParams: the upload function. Build the same url, headers and fields inside it, as uploadParams does in the snippet. It gets the File, an onProgress callback (0 to 100) and an AbortSignal.
onChangeStatus: onChange. Instead of one call per file and status, you get every row each time something changes, with status set to uploading, done or error and the error message on failed rows.
onSubmit and the submit button: onAllDone. Files upload as soon as they land, so there's no separate submit step. onAllDone fires once every row has finished.
accept: accept, passed to the file picker. maxSizeBytes: maxSize. Bigger files get a "Too large" row instead of an upload.
minSizeBytes and maxFiles: no prop. Check them in your upload function and reject with your own message.
inputContent and inputWithFilesContent: title, hint and chips (the small type labels under the hint).
canCancel, canRemove and canRestart: built in. Removing a row aborts it through the signal, and failed rows always get Retry.
PreviewComponent, LayoutComponent, SubmitButtonComponent and styles: no injection props. The component file is copied into your repo, so you change the markup there.
initialFiles: no match. The ref has addFiles if you need to queue files from code.

app/upload/UploadWithStatus.tsx

"use client";
// RDU's onChangeStatus(fileWithMeta, status) fired per file; onChange hands you every row at once.
import { useState } from "react";
import { UploadDropzone, type UploadItem } from "@/components/upload-dropzone/UploadDropzone";

export default function UploadWithStatus() {
  const [rows, setRows] = useState<UploadItem[]>([]);
  const failed = rows.filter((r) => r.status === "error");

  return (
    <>
      <UploadDropzone onChange={setRows} />
      {failed.length > 0 && (
        <p role="status">
          {failed.length} failed: {failed.map((r) => `${r.name} (${r.message ?? "error"})`).join(", ")}
        </p>
      )}
    </>
  );
}

Install

One commandnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.json
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

upload: (file, onProgress, signal) => Promise; reject to show Retry
accept: file types for the picker
maxSize: bytes; bigger files are refused
onChange: every row, whenever one changes
onAllDone: every file finished
title / hint / chips: the empty-state text

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Magic UIMagic UI is best for: landing pages built with shadcn/ui.

All comparisons, with prices read on each library's own site.

Questions

Does react-dropzone-uploader work with React 19?

Not in our test. Its dist bundles React 16.8.6, and rendering it under react 19.1.1 threw "Objects are not valid as a React child". npm still installs it, because its peer range is react >=16.2.0.

Is react-dropzone-uploader deprecated?

npm doesn't mark it deprecated and the repo isn't archived, but there has been no release since November 2019.

Should I use react-dropzone instead?

If you want only the drop zone and will draw your own file list, yes. It's maintained and free. Upload Dropzone adds the list, progress, Retry and cancel on top.

Where do files go?

Wherever your upload function sends them: your own route, S3, R2, UploadThing or Supabase Storage.

Is it really free?

Yes. MIT licence, no email needed for the registry install.

Can Cursor or v0 add it for me?

Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.

Does the dropzone work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Use it in Next.js

app/upload/Uploader.tsx

"use client"; // Before: <Dropzone getUploadParams={() => ({ url: "/api/upload" })} onChangeStatus={...} onSubmit={...} /> import { UploadDropzone, type Uploader, type UploadItem } from "@/components/upload-dropzone/UploadDropzone"; // What getUploadParams used to return: where the file goes and what rides along with it. function uploadParams(file: File) { return { url: "/api/upload", fields: { name: file.name }, headers: {} as Record<string, string> }; } // XMLHttpRequest, because fetch still has no upload progress event. const upload: Uploader = (file, onProgress, signal) => new Promise<void>((resolve, reject) => { const { url, fields, headers } = uploadParams(file); const body = new FormData(); for (const [key, value] of Object.entries(fields)) body.append(key, value); body.append("file", file); const xhr = new XMLHttpRequest(); xhr.open("POST", url); for (const [key, value] of Object.entries(headers)) xhr.setRequestHeader(key, value); xhr.upload.onprogress = (e) => { if (e.lengthComputable) onProgress((e.loaded / e.total) * 100); }; xhr.onload = () => (xhr.status < 300 ? resolve() : reject(new Error(`Upload failed (${xhr.status})`))); xhr.onerror = () => reject(new Error("Network error")); xhr.onabort = () => reject(new DOMException("Upload cancelled", "AbortError")); // removing a row aborts its upload, the way RDU's cancel button did signal.addEventListener("abort", () => xhr.abort()); xhr.send(body); }); export default function Uploader() { return ( <UploadDropzone upload={upload} accept="image/*,audio/*,video/*" maxSize={20 * 1024 * 1024} hint="up to 20 MB each" chips={["JPG", "PNG", "MP3", "MP4"]} onAllDone={(items: UploadItem[]) => { // RDU's onSubmit got the finished files; here they arrive once every row is done console.log(items.filter((i) => i.status === "done").map((i) => i.name)); }} /> ); }

app/api/upload/route.ts

import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const form = await req.formData();
  const file = form.get("file");
  if (!(file instanceof File)) return NextResponse.json({ error: "No file" }, { status: 400 });

  // hand the file to S3, R2, Supabase Storage or your disk here
  const bytes = Buffer.from(await file.arrayBuffer());
  return NextResponse.json({ name: file.name, size: bytes.length });
}

Good to know

Where react-dropzone-uploader stands: npm's latest is 2.11.0, from November 13, 2019. The GitHub repo (fortana-co/react-dropzone-uploader) isn't archived, but its last push was April 1, 2024 and it has 154 open issues. npm still counted 15,781 downloads in the week of October 16 to 22, 2026.

Why it breaks on React 19: its dist file ships its own copy of React 16.8.6, so the elements it makes carry the old element tag. We rendered it with react 19.1.1 on October 26, 2026 and React threw "Objects are not valid as a React child". Its peer range (react >=16.2.0) doesn't warn you, so npm installs it without a word.

When the free option fits better: if you only need the drop target and the file picker, react-dropzone is the maintained one. Version 20.1.4 came out on October 17, 2026, it peers on React 18 and up, and npm counted 8,639,511 downloads that same week. It has no upload or progress UI, so you'd build the list yourself.

Upload Dropzone is that list: drop or pick files, each row gets a progress ring, failed rows shake and get Retry, and removing a row aborts its upload. A total bar at the top counts everything. It's free under MIT and installs with one shadcn command.

There are no image or video thumbnails. Each row shows a coloured type badge, the name and the size. RDU's previews were its strong point, so if you need thumbnails, add them to the row in your copy of the file.

On Vercel a function's request body is capped at 4.5 MB, so the route above only suits small files there. For bigger ones, upload straight to storage with a presigned URL; the S3 guide under More for React shows that with this dropzone.

Type-checked on October 26, 2026 with TypeScript 5.9.3 against next 15.5.28, react 19.1.1 and the registry's UploadDropzone.tsx, with framer-motion 14.6.0. We didn't run the upload against a live server.

What each react-dropzone-uploader prop becomes

getUploadParams: the upload function. Build the same url, headers and fields inside it, as uploadParams does in the snippet. It gets the File, an onProgress callback (0 to 100) and an AbortSignal.

onChangeStatus: onChange. Instead of one call per file and status, you get every row each time something changes, with status set to uploading, done or error and the error message on failed rows.

onSubmit and the submit button: onAllDone. Files upload as soon as they land, so there's no separate submit step. onAllDone fires once every row has finished.

accept: accept, passed to the file picker. maxSizeBytes: maxSize. Bigger files get a "Too large" row instead of an upload.

minSizeBytes and maxFiles: no prop. Check them in your upload function and reject with your own message.

inputContent and inputWithFilesContent: title, hint and chips (the small type labels under the hint).

canCancel, canRemove and canRestart: built in. Removing a row aborts it through the signal, and failed rows always get Retry.

PreviewComponent, LayoutComponent, SubmitButtonComponent and styles: no injection props. The component file is copied into your repo, so you change the markup there.

initialFiles: no match. The ref has addFiles if you need to queue files from code.

app/upload/UploadWithStatus.tsx

"use client";
// RDU's onChangeStatus(fileWithMeta, status) fired per file; onChange hands you every row at once.
import { useState } from "react";
import { UploadDropzone, type UploadItem } from "@/components/upload-dropzone/UploadDropzone";

export default function UploadWithStatus() {
  const [rows, setRows] = useState<UploadItem[]>([]);
  const failed = rows.filter((r) => r.status === "error");

  return (
    <>
      <UploadDropzone onChange={setRows} />
      {failed.length > 0 && (
        <p role="status">
          {failed.length} failed: {failed.map((r) => `${r.name} (${r.message ?? "error"})`).join(", ")}
        </p>
      )}
    </>
  );
}

Questions

Does react-dropzone-uploader work with React 19?

Not in our test. Its dist bundles React 16.8.6, and rendering it under react 19.1.1 threw "Objects are not valid as a React child". npm still installs it, because its peer range is react >=16.2.0.

Is react-dropzone-uploader deprecated?

npm doesn't mark it deprecated and the repo isn't archived, but there has been no release since November 2019.

Should I use react-dropzone instead?

If you want only the drop zone and will draw your own file list, yes. It's maintained and free. Upload Dropzone adds the list, progress, Retry and cancel on top.

Where do files go?

Wherever your upload function sends them: your own route, S3, R2, UploadThing or Supabase Storage.

Is it really free?

Yes. MIT licence, no email needed for the registry install.

Can Cursor or v0 add it for me?

Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.

Does the dropzone work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.