Open-source React file upload component with drag & drop, progress bar, and cloud integrations

Website · Docs · Live Demo · StackBlitz Playground · Discord

---

Upup is a free, open-source React & TypeScript file upload library that gives you a production-ready drag-and-drop dropzone, file picker, upload button, progress bar, and retry logic — all in a single component. Upload images, videos, and multiple large files to AWS S3, Azure Blob, Google Drive, OneDrive, DigitalOcean Spaces, Backblaze B2, and more using presigned URLs and resumable chunked uploads.

Works with Next.js, Vite, Remix, Gatsby, and any React framework.

Features

• 🗂 Drag & drop dropzone — intuitive file picker with customizable upload button and UI
• 📊 Upload progress bar — real-time feedback with automatic retry on failure
• 🔄 Resumable chunked uploads — upload large files reliably with presigned URLs
• 🖼 File upload with preview — image, video, and document previews before uploading
• 📁 Multiple file upload — batch upload with file size limit validation
• ☁️ Multi-cloud support — S3, Azure Blob, Google Drive, OneDrive, DigitalOcean Spaces, Backblaze B2
• ⚙️ Server-side helpers — tiny Node.js utilities for presigned URL generation (S3 & Azure)
• 🎨 Fully customizable — themes, styles, and components you can override
• 📦 TypeScript-first — full type definitions out of the box

Install

npm i upup-react-file-uploader     # or yarn add / pnpm add / bun install

Quick Start

Frontend (React / Next.js / Vite / Remix)

'use client'

import { UpupUploader, UpupProvider } from 'upup-react-file-uploader'
import 'upup-react-file-uploader/styles'

export default function Uploader() {
    return (
        <UpupUploader
            provider={UpupProvider.AWS}
            tokenEndpoint="/api/upload-token"
        />
    )
}

Backend (Next.js API / Express / NestJS)

import { s3GeneratePresignedUrl } from "upup-react-file-uploader/server";

export async function POST(req: Request) {
  const body = await req.json();
  const { provider, customProps, enableAutoCorsConfig ...fileParams } = body;

  const presignedData = await s3GeneratePresignedUrl({
    origin: req.headers.get("origin") as string,
    provider,
    fileParams,
    bucketName: process.env.S3_BUCKET_NAME!,
    s3ClientConfig: {
      region: process.env.S3_REGION,
      credentials: {
        accessKeyId: process.env.S3_KEY_ID!,
        secretAccessKey: process.env.S3_SECRET_KEY!,
      },
    },
    enableAutoCorsConfig,
  });

  return Response.json(presignedData);
}

Full documentation & examples → useupup.com/documentation/docs/getting-started

Battle-tested in Production

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

Contributing

We love PRs! Please see CONTRIBUTING and adhere to our Code of Conduct.

Found a vulnerability? Check our Security Policy.

---

Monorepo Setup

This repo is a monorepo managed with pnpm workspaces and Turborepo.

upup/
├── packages/upup/      # The published npm package (upup-react-file-uploader)
├── apps/landing/       # Next.js marketing site at useupup.com
├── apps/docs/          # Docusaurus documentation site
├── local-dev/          # Port config & local dev helpers
└── turbo.json          # Build pipeline configuration

Getting Started (Development)

git clone https://github.com/DevinoSolutions/upup.git
cd upup
pnpm install
pnpm dev          # runs landing + docs + package watcher via Turborepo

Commands

Command	Description
pnpm dev	Run everything in watch mode
pnpm dev:package	Storybook + local mock server
pnpm build	Build all (package → docs → landing)
pnpm lint / pnpm test / pnpm typecheck	Workspace-wide pipelines

Publishing

pnpm changeset
pnpm changeset version
pnpm --filter upup-react-file-uploader run release

---

💬 Discord · 🐛 Issues · 📦 npm · 🌐 Website

MIT License · Made with ❤️ by Devino