mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-17 16:50:22 +00:00
d9d44ce5e5
exact copy of #6175 - I will point the uppy deps upgrade pr to this PR's branch - no other changes needed in this branch as #6175 was reviewed and all the comments were resolved this should be the order of merge : 1. #6300 2. uppy deps upgrade ( yet to be raised ) 3. merge this to main 4. merge biome changes #6244 @mifi let me know if you think otherwise. --------- Co-authored-by: Mikael Finstad <finstaden@gmail.com> |
||
|---|---|---|
| .. | ||
| app | ||
| public | ||
| .gitignore | ||
| 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