Vanilla JS File UploaderOne core, every framework
A free, open-source drag-and-drop file uploader with a headless core and native UI for Vanilla JS. Cloud drives, camera, screen capture, and secure server-mode uploads to any S3-compatible storage.
npm install @useupup/vanillaOne uploader, the same API in every framework
import { createUploader } from '@useupup/vanilla'import '@useupup/vanilla/styles' createUploader('#uploader', { 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.
Vanilla JS file uploader in 3 steps
Install @useupup/vanilla, 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/vanilla, brings the UI and the upload engine. pnpm, Yarn and Bun work the same way.Terminalnpm i @useupup/vanillaStep 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.tsimport { createUploader } from '@useupup/vanilla' import '@useupup/vanilla/styles' createUploader('#uploader', { 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.tscreateUploader('#uploader', { provider: 'aws', uploadEndpoint: '/api/upload-token', sources: ['local', 'camera', 'googleDrive', 'oneDrive'], cloudDrives: { googleDrive: { clientId: '...', apiKey: '...', appId: '...' }, oneDrive: { clientId: '...' }, }, })
No framework required
createUploader takes a CSS selector or an HTMLElement. Call destroy() on the returned instance when you tear the view down.
Web component
Import '@useupup/vanilla/element' to register an <upup-uploader> custom element and configure it with provider and upload-endpoint attributes.
Vanilla JS file upload libraries compared
How upup lines up against the Vanilla JS 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)
- ICU i18n, theming and dark mode
- MIT license, no license key
| Library | What it is | Cloud-drive imports | License |
|---|---|---|---|
| upup (@useupup/vanilla) | Native Vanilla JS UI on a headless core, in client or server mode | Google Drive, OneDrive, Dropbox, Box | MIT |
| Dropzone.js | Drag-and-drop upload library for plain JavaScript | 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 Vanilla JavaScript file upload libraries compared.
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
Vanilla JS file upload questions
Install @useupup/vanilla and call createUploader('#uploader', { 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.