Next.js + Transloadit
Uppy in einer Client Component und einen kleinen App-Router-Endpunkt verwenden, der ein festes Transloadit-Template signiert, ohne das Auth Secret preiszugeben.
Ausführbare Anleitung
Integration aufbauen
Die Server-Route signiert ein festes Template, und die Client Component übergibt Uppy vor jedem Upload die signierten Parameter.
- Erstellen Sie ein Transloadit Template. Dessen ID, der Auth Key und das Auth Secret gehören in Umgebungsvariablen auf dem Server.
- Fügen Sie den Route Handler hinzu und schützen Sie ihn mit denselben Autorisierungsprüfungen wie den Rest Ihrer Anwendung.
- Rendern Sie die Client Component UploadForm auf einer Seite und wählen Sie eine Datei aus, um das Template auszuführen.
Installieren
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} />
}Authentifizierung
- Bewahren Sie TRANSLOADIT_SECRET in einer Server-Umgebungsvariablen ohne Präfix auf. Next.js stellt Variablen mit dem Präfix NEXT_PUBLIC_ in Browser-Bundles bereit.
- Der Route Handler verwendet das offizielle Node-SDK, um die feste Template ID mit einer Ablaufzeit von fünf Minuten zu signieren, und gibt nur params und eine Signatur an den Browser zurück.
- Verlangen Sie die Benutzerautorisierung, die Ihr Produkt benötigt, bevor Sie eine Signatur zurückgeben, und akzeptieren Sie keine beliebigen Template IDs oder Steps aus dem Browser.
Einschränkungen und Hinweise zum Betrieb
- Der Browser kann ein Auth Secret nicht schützen. Signaturerstellung und Autorisierungsprüfungen müssen in Code bleiben, der nur auf dem Server läuft.
- waitForEncoding lässt die Upload-Oberfläche auf die Verarbeitung warten. Nutzen Sie bei lang laufenden Verarbeitungen Assembly Notifications oder rufen Sie die Assembly später ab.
- Das Beispiel autorisiert ein festes Template. Dynamische Felder müssen dennoch serverseitig validiert werden, bevor sie in die signierten Parameter aufgenommen werden.
Weitere Integrationen