Changelog

Fixes

The rare cases, the ones that only turn up in real use. Nothing to migrate: every prop, callback and adapter works exactly as it did.

• Fixed picking the same file twice. Choosing a file you just discarded works now.
• Fixed sizes always shown in MB. They pick their own unit now: 100 KB, 1.4 MB, 2 GB.
• Fixed allowedFormats={["font/*"]} showing no format label. It reads “fonts” now.
• Fixed file names with #, ? or spaces breaking Supabase uploads.
• Fixed cancelling an upload just before its request started, which left it hanging.
• Fixed starting the same upload twice, which ran two requests against one progress bar.
• Fixed an unrecognised locale. It falls back to English now.
• Fixed the packaged TypeScript not compiling outside Next.js and Vite.
• Fixed a lint error that surfaced on the standard Next ESLint config.

Initial release

The first public version of Drop Upload: a complete drag-and-drop file upload component for React, delivered as source you own. It's a component folder you drop into your app, not an npm package you depend on.

What's inside:

• Drag & drop, plus click to browse: built on the browser's own File, DataTransfer and AbortController APIs, so there is no upload library between your code and the file.
• Upload adapters: custom REST endpoint, S3, S3 multipart, Supabase and Cloudinary, with real progress, cancel and retry on each one.
• Validation: restrict allowed formats, size limits and file count, with the rejection reason surfaced in the UI. Dropped folders are caught and rejected too, rather than attaching as unreadable 0-byte rows.
• Avatar variant: a single-image avatar uploader sharing the same engine and props.
• Customization: plain CSS Modules. Restyle it with your own tokens, no Tailwind required.
• Internationalization: English, Spanish, French and German copy built in, and every string overridable via translations.
• Callbacks: hooks for drops, rejections, success, errors and cancels, so the component reports into your own state.
• TypeScript and JavaScript: fully typed source, with a plain JavaScript copy shipped in the same ZIP.

Compatibility:

• React: 18 and 19.
• Frameworks: Next.js, Vite, Remix and Astro. The component ships its own "use client" directive, so it imports straight into a React Server Component page.
• Dependencies: motion, and nothing else.

Try it in the playground, or start with the documentation.