Preact File UploaderOne core, every framework
A free, open-source drag-and-drop file uploader with a headless core and native UI for Preact. Cloud drives, camera, screen capture, and secure server-mode uploads to any S3-compatible storage.
npm install @useupup/preactOne uploader, the same API in every framework
import { UpupUploader } from '@useupup/preact'import '@useupup/preact/styles' export function App() { 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.
Preact file uploader in 3 steps
Install @useupup/preact, 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/preact, brings the UI and the upload engine. pnpm, Yarn and Bun work the same way.Terminalnpm i @useupup/preactStep 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.
App.tsximport { UpupUploader } from '@useupup/preact' import '@useupup/preact/styles' export function App() { 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.
App.tsx<UpupUploader provider="aws" uploadEndpoint="/api/upload-token" sources={['local', 'camera', 'googleDrive', 'oneDrive']} cloudDrives={{ googleDrive: { clientId: '...', apiKey: '...', appId: '...' }, oneDrive: { clientId: '...' }, }} />
preact/compat
@useupup/preact is a preact/compat re-export of @useupup/react, so it needs Preact 10.13+ and the standard react and react-dom to preact/compat aliases in your bundler.
Image editor
The editor loads as a lazy, isolated real-React island, so React never enters your main Preact bundle.
Preact file upload libraries compared
How upup lines up against the Preact 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/preact) | Native Preact UI on a headless core, in client or server mode | Google Drive, OneDrive, Dropbox, Box | 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 all upup comparisons.
Keep reading
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
Preact file upload questions
Install @useupup/preact 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.