mirror of
https://github.com/transloadit/uppy.git
synced 2026-01-23 10:25:33 +00:00
567be4efab
Had to create a new PR since after the 5.0 merge, #5818 was throwing errors. ## Examples Added - **React Router v7** - Uppy Dashboard with Tus, XHR, and Transloadit , tus server implemented using react-router/express adapter , rest using regular resource routes - This still doesn't have hot reloading in the dev server though , can be added through nodemon - **Next.js** - Uppy Dashboard with Tus, XHR, and Transloadit - **Angular** - Uppy Dashboard and Dashboard Modal with Tus |
||
|---|---|---|
| .. | ||
| app | ||
| public | ||
| .gitignore | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| server.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
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:
- TUS server setup with Express middleware for resumable uploads
- XHR uploads using React Router's native resource routes
- Transloadit uploads with signature generation and file processing
Transloadit Setup
To use Transloadit uploads, you need to:
- Sign up at transloadit.com
- Get your credentials from your account dashboard
- Create a template for your processing needs
- 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