mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-18 00:55:35 +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
49 lines
1.4 KiB
Markdown
49 lines
1.4 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Visit [http://localhost:3000](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](https://transloadit.com)
|
|
2. **Get your credentials** from your account dashboard
|
|
3. **Create a template** for your processing needs
|
|
4. **Set environment variables**:
|
|
|
|
```bash
|
|
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:
|
|
```env
|
|
TRANSLOADIT_KEY=your_key_here
|
|
TRANSLOADIT_SECRET=your_secret_here
|
|
TRANSLOADIT_TEMPLATE_ID=your_template_id_here
|
|
```
|
|
|