One file uploader. Every framework.

A headless upload engine with native, byte-identical UI packages for React, Vue, Svelte, Angular, Vanilla JS, and Preact — with optional server-mode uploads, cloud drives, camera, screen capture, and link imports.

Website · Docs · Live Demo · Discord

---

upup is a free, MIT-licensed file uploader built as one headless @upupjs/core engine with a matching native UI for every major framework. React is the visual canon; the Vue, Svelte, Angular, Vanilla, and Preact ports render the same DOM with the same props, verified byte-for-byte by a cross-framework parity harness. Upload straight from the browser to any S3-compatible storage (Client Mode), or route through your own backend with an HMAC-signed trust model (Server Mode via @upupjs/server).

Install

Pick the package for your framework — the component API and rendered DOM are identical across all of them:

Package	Install	Get started
@upupjs/react	npm i @upupjs/react	React quickstart
@upupjs/vue	npm i @upupjs/vue	Vue quickstart
@upupjs/svelte	npm i @upupjs/svelte	Svelte quickstart
@upupjs/angular	npm i @upupjs/angular	Angular quickstart
@upupjs/vanilla	npm i @upupjs/vanilla	Vanilla quickstart
@upupjs/preact	npm i @upupjs/preact	Preact quickstart
@upupjs/next	npm i @upupjs/next	Client re-export + /server route handlers (App & Pages routers)
@upupjs/core	npm i @upupjs/core	Headless engine — state, pipeline, drive plugins, i18n, theme
@upupjs/server	npm i @upupjs/server	Server Mode — S3 presign/proxy, drive OAuth, HMAC trust model

Quick start (React)

import { UpupUploader } from '@upupjs/react'
import '@upupjs/react/styles'

export default function Uploader() {
    return <UpupUploader provider="aws" uploadEndpoint="/api/upload-token" />
}

Client Mode uploads directly from the browser to your storage; your server only issues short-lived presigned URLs at uploadEndpoint — a route you provide, either a small presign handler of your own or @upupjs/server's createUpupHandler (see Server mode below). The stylesheet is a separate import so projects without Tailwind get the same look. Every other framework mounts the same component with the same props — see the per-framework quickstarts in the install table above.

Server mode

Route uploads through your own backend so storage credentials and drive OAuth tokens never reach the browser. createUpupHandler mounts on any Node or edge framework and enforces an HMAC-signed trust model — uploadTokenSecret is required and must be at least 16 characters:

// app/api/upup/[...route]/route.ts  (Next.js App Router)
import { createUpupHandler } from '@upupjs/server'

const handler = createUpupHandler({
    storage: {
        type: 'aws',
        bucket: process.env.S3_BUCKET!,
        region: process.env.S3_REGION!,
    },
    uploadTokenSecret: process.env.UPUP_UPLOAD_TOKEN_SECRET!, // required · stable · high-entropy · >=16 chars
})

export const GET = handler
export const POST = handler

S3 credentials resolve from the standard AWS environment (AWS_ACCESS_KEY_ID / AWS_SECRET_ACCESS_KEY or an IAM role), or you can pass accessKeyId / secretAccessKey explicitly. Then point the uploader at the handler:

<UpupUploader mode="server" serverUrl="/api/upup" provider="aws" />

Express, Fastify, and Hono handlers ship as subpath exports (@upupjs/server/express, @upupjs/server/fastify, @upupjs/server/hono), and @upupjs/next wraps both the App and Pages routers.

Full docs → useupup.com/documentation/getting-started · Server Mode setup → apps/docs/docs/guides/server-mode-setup.md

Features

• Headless core. @upupjs/core is a zero-framework-dependency engine: file state, an upload pipeline (compression, HEIC→JPEG, EXIF stripping, checksums, thumbnails, optional Web Worker offload), cloud-drive plugins, i18n, and theming. Build your own UI on it, or use a native package.
• Native UI for six frameworks. React, Vue, Svelte, Angular, Vanilla JS, and Preact — same DOM, same Tailwind classes, enforced byte-for-byte by a parity harness.
• Client or Server mode. Direct browser → storage presigned uploads, or a server-proxied @upupjs/server with an HMAC-signed trust model (signed length, key/uploadId binding, mandatory secrets).
• S3-compatible storage. AWS S3, Cloudflare R2, MinIO, DigitalOcean Spaces, Backblaze B2, Wasabi — any S3-compatible endpoint.
• Cloud drives. Import from Google Drive, OneDrive, Dropbox, and Box, in client or server mode.
• More sources. Drag-and-drop, file picker, camera, screen capture, audio recording, and link (URL) import.
• Resumable uploads. Optional chunked/resumable strategy (tus) for large files, loaded on demand so it never weighs down the core bundle.
• Image editor. Crop, rotate, and annotate before upload (React / Preact only).
• i18n & theming. ICU-based localization with 9 bundled locales and RTL support, plus a slot-level theming system that targets every rendered element.
• TypeScript-first. Full type definitions out of the box.

Battle-tested in production

• uNotes — AI doc uploads for past exams → unotes.net
• Shorty — media uploads for transcripts → aishorty.com

Contributing

PRs welcome. Please read CONTRIBUTING.md and our Code of Conduct. Found a vulnerability? See the Security Policy.

---

Monorepo layout

This repo is a pnpm workspace driven by Turborepo.

upup/
├── packages/core/     # @upupjs/core    — headless engine (state, pipeline, drives, i18n, theme)
├── packages/react/    # @upupjs/react   — canonical UI
├── packages/vue/      # @upupjs/vue     — native Vue port (DOM-identical to react)
├── packages/svelte/   # @upupjs/svelte  — native Svelte port
├── packages/angular/  # @upupjs/angular — native Angular port
├── packages/vanilla/  # @upupjs/vanilla — framework-free port
├── packages/preact/   # @upupjs/preact  — preact/compat re-export of react
├── packages/next/     # @upupjs/next    — client re-export + /server route handlers
├── packages/server/   # @upupjs/server  — server-mode endpoints (S3 presign/proxy, drive OAuth)
├── apps/playground/   # Main dev app
├── apps/landing/      # Marketing site (useupup.com)
├── apps/docs/         # Documentation site
├── apps/e2e-test/     # Playwright: deep React suite + cross-framework parity harness
└── turbo.json         # Build pipeline

Getting started (development)

git clone https://github.com/DevinoSolutions/upup.git
cd upup
nvm use                 # Node 20.20.2, pinned in .nvmrc
pnpm install
pnpm dev                # landing + docs + playground + package watchers, via Turborepo

Command	Description
pnpm dev	Run everything in watch mode
pnpm build	Build all packages + apps
pnpm test	Run every package's vitest suite
pnpm typecheck	tsc --noEmit across every package

Releases go through changesets: pushes to master open a release PR and publish the public packages via CI (.github/workflows/publish.yml).

---

💬 Discord · 🐛 Issues · 🌐 Website

MIT License · Made with ❤️ by Devino