Next.js + Transloadit
Utiliser Uppy dans un Client Component et un petit point de terminaison App Router qui signe un Template Transloadit fixe sans exposer l’Auth Secret.
Recette exécutable
Mettre en place l’intégration
La route serveur signe un Template fixe, et le composant client fournit à Uppy les paramètres signés avant chaque téléversement.
- Créez un Template Transloadit et placez son identifiant, l’Auth Key et l’Auth Secret dans des variables d’environnement du serveur.
- Ajoutez le gestionnaire de route et protégez-le avec les mêmes contrôles d’autorisation que le reste de votre application.
- Affichez le Client Component UploadForm sur une page et sélectionnez un fichier pour exécuter le Template.
Installer
yarn add @uppy/core @uppy/dashboard @uppy/react @uppy/transloadit transloaditapp/api/transloadit/route.ts
import { NextResponse } from 'next/server'
import { Transloadit } from 'transloadit'
export async function POST() {
const authKey = process.env.TRANSLOADIT_KEY
const authSecret = process.env.TRANSLOADIT_SECRET
const templateId = process.env.TRANSLOADIT_TEMPLATE_ID
if (!authKey || !authSecret || !templateId) {
return NextResponse.json({ error: 'Server configuration is incomplete' }, { status: 500 })
}
const transloadit = new Transloadit({ authKey, authSecret })
const requestParams = {
auth: { expires: new Date(Date.now() + 5 * 60 * 1000).toISOString() },
template_id: templateId,
}
const { params, signature } = transloadit.calcSignature(requestParams)
return NextResponse.json(
{ params, signature },
{ headers: { 'Cache-Control': 'private, no-store' } },
)
}app/UploadForm.tsx
'use client'
import Uppy from '@uppy/core'
import TransloaditPlugin from '@uppy/transloadit'
import Dashboard from '@uppy/react/dashboard'
import { useEffect, useState } from 'react'
import '@uppy/core/css/style.min.css'
import '@uppy/dashboard/css/style.min.css'
export function UploadForm() {
const [uppy, setUppy] = useState<Uppy | null>(null)
useEffect(() => {
const instance = new Uppy().use(TransloaditPlugin, {
waitForEncoding: true,
async assemblyOptions() {
const response = await fetch('/api/transloadit', { method: 'POST' })
if (!response.ok) throw new Error('Could not authorize upload')
return response.json()
},
})
setUppy(instance)
return () => instance.destroy()
}, [])
return uppy == null ? null : <Dashboard uppy={uppy} />
}Authentification
- Conservez TRANSLOADIT_SECRET dans une variable d’environnement serveur sans préfixe. Next.js expose aux bundles du navigateur les variables préfixées par NEXT_PUBLIC_.
- Le Route Handler utilise le SDK Node officiel pour signer l’ID de Template fixe avec une expiration de cinq minutes et ne renvoie au navigateur que les paramètres et une signature.
- Exigez l’autorisation utilisateur requise par votre produit avant de renvoyer une signature, et n’acceptez pas d’ID de Template ni de Steps arbitraires provenant du navigateur.
Limitations et notes opérationnelles
- Le navigateur ne peut pas protéger un Auth Secret. La génération des signatures et les contrôles d’autorisation doivent rester dans du code exclusivement côté serveur.
- waitForEncoding maintient l’interface de téléversement en attente du traitement. Pour les traitements longs, utilisez les Assembly Notifications ou récupérez l’Assembly ultérieurement.
- L’exemple autorise un seul Template fixe. Les champs dynamiques doivent toujours être validés côté serveur avant d’être inclus dans les paramètres signés.
Autres intégrations