React File UploaderOne core, every framework
A free, open-source drag-and-drop file uploader with a headless core and native UI for React. Cloud drives, camera, screen capture, and secure server-mode uploads to any S3-compatible storage.
npm install @useupup/reactOne uploader, the same API in every framework
'use client'import { UpupUploader } from '@useupup/react'import '@useupup/react/styles' export default function Uploader() { return <UpupUploader provider="aws" uploadEndpoint="/api/upload-token" />}Uploads in this demo are real: files go to a demo storage bucket, so don't upload anything private.
React file uploader in 3 steps
Install @useupup/react, render the component, and turn on the sources you need. In client mode files go straight from the browser to your S3-compatible bucket; in server mode they go through @useupup/server.
Step 1: Install the package
One package,
@useupup/react, brings the UI and the upload engine. pnpm, Yarn and Bun work the same way.Terminalnpm i @useupup/reactStep 2: Render the uploader
Add it with its stylesheet and point it at your upload endpoint: a route that returns a short-lived presigned URL for each file. The code examples include a ready-made handler.
Uploader.tsx'use client' import { UpupUploader } from '@useupup/react' import '@useupup/react/styles' export default function Uploader() { return <UpupUploader provider="aws" uploadEndpoint="/api/upload-token" /> }Step 3: Add cloud drives and sources
List the sources you want and add the client IDs from each provider's developer console. Google Drive, OneDrive, Dropbox and Box are browsed inside the uploader panel.
Uploader.tsx<UpupUploader provider="aws" uploadEndpoint="/api/upload-token" sources={['local', 'camera', 'googleDrive', 'oneDrive']} cloudDrives={{ googleDrive: { clientId: '...', apiKey: '...', appId: '...' }, oneDrive: { clientId: '...' }, }} />
Next.js
In the App Router the uploader is a Client Component, so keep the 'use client' directive from the snippet. @useupup/next re-exports this UI and adds server-mode route handlers for the App Router and the Pages Router.
Image editor
Cropping, rotating and annotating images before upload is built in and on by default in the React package. Pass imageEditor={false} to turn it off.
React file upload libraries compared
How upup lines up against the React uploaders teams usually weigh. Each row states what the library is, whether it imports from cloud drives, and its license.
- Drag-and-drop dropzone, file picker, previews and progress
- Google Drive, OneDrive, Dropbox and Box imports
- Camera, screen capture and link imports
- Resumable uploads with tus or S3 multipart
- Presigned uploads to S3, R2, MinIO and other S3-compatible storage
- Server mode with an HMAC-signed trust model (@useupup/server)
- Image editor: crop, rotate and annotate before upload
- ICU i18n, theming and dark mode
- MIT license, no license key
| Library | What it is | Cloud-drive imports | License |
|---|---|---|---|
| upup (@useupup/react) | Native React UI on a headless core, in client or server mode | Google Drive, OneDrive, Dropbox, Box | MIT |
| react-dropzone | Drop-zone hook; you build the UI and the upload | No | MIT |
| Better Upload | Presigned S3 upload hooks and shadcn/ui components; React client only | No | MIT |
| react-uploady | Upload hooks and components, with chunked and tus add-ons | No | MIT |
| FilePond | Upload widget that posts to your own server endpoint | No | MIT |
| Uppy | Modular uploader with framework wrappers around its UI plugins | Yes, through its Companion server | MIT |
For resumable uploads, direct-to-S3 and image editing side by side, see React file upload libraries compared.
Keep reading
- React quickstart
- Next.js quickstart
- UpupUploader props reference
- Server mode setup with @useupup/server
- Upload to AWS S3
- Upload to Cloudflare R2
- Upload to MinIO
- Upload to Azure Blob Storage
- Resumable uploads
- Localization and i18n
- Events and callbacks reference
- upup vs Uppy
- upup vs FilePond
- Upload to S3 from React with presigned URLs
- upup vs react-dropzone
- upup vs UploadThing
- UploadThing pricing and S3 costs
- upup vs Better Upload
- PrimeReact FileUpload alternatives
Everything you need for modern file uploads
One uploader with a headless core and native UI for React, Vue, Svelte, Angular, Vanilla JS, and Preact — with a drag-and-drop dropzone, file picker, cloud-drive sources, camera and screen capture, and optional server-mode uploads to any S3-compatible storage.
Six Frameworks, One Uploader
Native UI for React, Vue, Svelte, Angular, Vanilla JS, and Preact — one uploader that renders the same DOM structure, classes, and accessibility tree in every framework, enforced by a cross-framework parity suite.
See it liveCloud Drives, Camera & Screen Capture
Import files straight from Google Drive, OneDrive, Dropbox, and Box — plus device camera, screen capture, audio recording, and link (URL) imports.
See it liveSecure Server Mode
Optional server mode signs every upload on your own backend with an HMAC-signed trust model and runs cloud-drive OAuth there too, while file bytes still go straight to your bucket — with ready-made adapters for Express, Fastify, Hono, and Next.js.
Built-In Image Editor (React & Preact)
Crop, rotate, annotate, and filter images before upload with the integrated Filerobot editor — available in React and Preact, loaded lazily so it never weighs down your bundle.
See it liveCrash-Safe & Resumable
Reload the page mid-upload and pick up where you left off — crash recovery restores the queue, and resumable chunked uploads (tus) handle large files over unreliable networks.
Fast by Default: Workers + HEIC
Image compression runs off the main thread in a web worker, so the page stays responsive — and opt-in HEIC to JPEG conversion means .heic photos from iPhones just work.
Headless Core
Framework-agnostic engine — bring your own UI.
Any S3-Compatible Storage
AWS, R2, MinIO, Spaces, B2, Wasabi, and more.
Previews, Progress & Retry
Live previews, progress bar, and automatic retry.
Themeable & Localized
Theme tokens, dark mode, and built-in locales.
Accessible & TypeScript-First
Accessibility checks in our CI suite, fully typed APIs.
Let your users connect to their favorite storage cloud providers
Users can directly upload from these providers in upup
Supported today
On the roadmap — click to request one
And for developers, connect upup to your favorite cloud bucket
You can connect to upup using any S3 provider. We also support Azure Blob Storage in client mode.
Supported today
On the roadmap — click to request one
Support for all file types
Upload images, videos, documents, and large files — handle any file type and size limit your users need
Try it in your browser
Browse a real React example — edit the component, tweak the dropzone and file picker, then open it in StackBlitz to run it live. The same uploader ships for Vue, Svelte, Angular, Vanilla JS, and Preact.
Like what you see? Install the package for your framework — React, Vue, Svelte, Angular, Vanilla JS, or Preact — and start uploading files today.
React file upload questions
Install @useupup/react and render <UpupUploader provider="aws" uploadEndpoint="/api/upload-token" />. Your uploadEndpoint route returns a short-lived presigned URL for each file. The browser then uploads straight to the bucket, so file bytes never pass through your app server. The same setup works for Cloudflare R2, MinIO, DigitalOcean Spaces, Backblaze B2, Wasabi, and other S3-compatible storage.
Still have questions? Ask on our Discord or contact support.
Help us improve
Your feedback drives our development. Share your thoughts, report issues, or suggest new features.
Open Source & Community Driven
Upup is open source and welcomes contributions. Whether you're fixing bugs, adding features, or improving documentation, every contribution makes a difference.