uppy/examples/reactrouter
prakash 9fa8886a2a
chore(deps): upgrade TypeScript to 6
Moves all 43 workspaces to typescript ^6.0.3 (@uppy/companion was already
pinned to 6.0.3). The two Angular workspaces stay on their own lines,
~5.7.3 and ~5.9.3, because the Angular compiler pins its supported range.

TypeScript 6 reports TS2882 for side-effect imports of files it has no
declarations for, which the browser tests in @uppy/dashboard,
@uppy/golden-retriever and @uppy/xhr-upload hit when importing plugin CSS.
Each gets a one-line ambient declaration.

Nothing else changed: no source, no config, no lockfile churn beyond the
compiler itself.

Verified: yarn build (54/54), yarn typecheck (75/75), yarn check:ci,
yarn test (19/19).
2026-07-26 02:45:03 +05:30
..
app @uppy/examples: Add new examples (#5942) 2025-09-10 21:46:19 +05:30
public @uppy/examples: Add new examples (#5942) 2025-09-10 21:46:19 +05:30
.gitignore @uppy/examples: Add new examples (#5942) 2025-09-10 21:46:19 +05:30
package.json chore(deps): upgrade TypeScript to 6 2026-07-26 02:45:03 +05:30
README.md @uppy/examples: Add new examples (#5942) 2025-09-10 21:46:19 +05:30
server.ts upgrade to express v5 (#6304) 2026-05-21 11:14:23 +08:00
tsconfig.json @uppy/examples: Add new examples (#5942) 2025-09-10 21:46:19 +05:30
vite.config.ts @uppy/examples: Add new examples (#5942) 2025-09-10 21:46:19 +05:30

React Router v7 + Uppy Upload Examples

Complete showcase of Uppy Dashboard with TUS (resumable), XHR (standard), and Transloadit (with processing) uploads in React Router v7 framework mode.

Quick Start

npm install
npm run dev

Visit http://localhost:3000 to explore three upload methods:

  • TUS uploads: Resumable, perfect for large files
  • XHR uploads: Standard HTTP, ideal for regular files
  • Transloadit uploads: With powerful file processing capabilities

What You'll Learn

This example demonstrates three upload approaches with Uppy in React Router v7:

  1. TUS server setup with Express middleware for resumable uploads
  2. XHR uploads using React Router's native resource routes
  3. Transloadit uploads with signature generation and file processing

Transloadit Setup

To use Transloadit uploads, you need to:

  1. Sign up at transloadit.com
  2. Get your credentials from your account dashboard
  3. Create a template for your processing needs
  4. Set environment variables:
export TRANSLOADIT_KEY="your_key_here"
export TRANSLOADIT_SECRET="your_secret_here"
export TRANSLOADIT_TEMPLATE_ID="your_template_id_here"

Or create a .env file:

TRANSLOADIT_KEY=your_key_here
TRANSLOADIT_SECRET=your_secret_here
TRANSLOADIT_TEMPLATE_ID=your_template_id_here