Convex

@transloadit/convex est un composant Convex qui permet d’utiliser Transloadit comme une fonctionnalité native. Il signe les options de téléversement côté serveur, vérifie les webhooks et stocke les résultats dans Convex pour que votre interface puisse se mettre à jour en temps réel.

Installer

npm i @transloadit/convex @uppy/core @uppy/transloadit

Configurer

Enregistrez le composant :

// convex/convex.config.ts
import { defineApp } from 'convex/server'
import transloadit from '@transloadit/convex/convex.config'

const app = defineApp()
app.use(transloadit)

export default app

Configurez l’authentification Convex pour votre application. Définissez les informations d’accès du serveur et le tokenIdentifier du seul utilisateur autorisé à essayer ce flux de téléversement. Récupérez cet identifiant depuis un contexte serveur de confiance et authentifié à l’aide de ctx.auth.getUserIdentity(), et non à partir de données provenant du navigateur :

npx convex env set TRANSLOADIT_KEY 'YOUR_AUTH_KEY'
npx convex env set TRANSLOADIT_SECRET 'YOUR_AUTH_SECRET'
npx convex env set TRANSLOADIT_UPLOADER_TOKEN_IDENTIFIER 'YOUR_APPROVED_TOKEN_IDENTIFIER'

N’exposez qu’une action de signature autorisée. Les wrappers makeTransloaditAPI du composant n’ajoutent aucun contrôle d’autorisation au niveau de l’application. Cet exemple n’accepte aucun paramètre du client et ne signe que le Job de redimensionnement ci-dessous, pour un seul téléversement attendu, avec une expiration au bout de cinq minutes :

// convex/transloadit.ts
import { Transloadit } from '@transloadit/convex'
import { ConvexError } from 'convex/values'
import { components } from './_generated/api'
import { action } from './_generated/server'

const transloadit = new Transloadit(components.transloadit)

export const createAssemblyOptions = action({
  args: {},
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity()
    if (identity === null) {
      throw new ConvexError('Sign in to upload files.')
    }

    const allowedUploader = process.env.TRANSLOADIT_UPLOADER_TOKEN_IDENTIFIER
    if (!allowedUploader || identity.tokenIdentifier !== allowedUploader) {
      throw new ConvexError('Uploads are not enabled for this account.')
    }

    return transloadit.createAssemblyOptions(ctx, {
      steps: {
        resized: {
          use: ':original',
          robot: '/image/resize',
          width: 800,
        },
      },
      numExpectedUploadFiles: 1,
      // Whole-second UTC avoids ambiguity in API date parsing.
      expires: new Date(Date.now() + 5 * 60 * 1000).toISOString().replace(/\.\d{3}Z$/, 'Z'),
    })
  },
})

Pour une application multi-utilisateur, remplacez la liste d’autorisation limitée à un seul utilisateur par vos propres vérifications d’appartenance et de quota de téléversement avant la signature. Conservez les Instructions autorisées sur le serveur. Les requêtes de résultats et l’ingestion des webhooks nécessitent leurs propres contrôles d’accès ; consultez la documentation du composant sur le backend et les webhooks.

Client Uppy

Passez le ConvexClient authentifié de votre application à cette fabrique. Configurez setAuth() sur le client avec votre fournisseur d’authentification avant de téléverser des fichiers. La fonction de rappel appelle l’action via ce client et renvoie son résultat { params, signature, fields } directement à Uppy :

// src/uploader.ts
import Uppy from '@uppy/core'
import Transloadit from '@uppy/transloadit'
import type { ConvexClient } from 'convex/browser'
import { api } from '../convex/_generated/api'

export function createUploader(convex: ConvexClient): Uppy {
  return new Uppy({
    restrictions: { maxNumberOfFiles: 1, allowedFileTypes: ['image/*'] },
  }).use(Transloadit, {
    waitForEncoding: true,
    assemblyOptions: () => convex.action(api.transloadit.createAssemblyOptions, {}),
  })
}

Utilisez l’instance Uppy renvoyée avec votre sélecteur de fichiers, puis appelez uppy.upload(). Les restrictions du sélecteur aident l’utilisateur à sélectionner un fichier ; l’action serveur contrôle l’autorisation et veille à ce que seul le Job de traitement autorisé soit exécuté. Suivez le guide Uppy pour les intégrations dans l’interface utilisateur.

Application de démonstration

Consultez la démonstration de bout en bout d’une galerie de mariage sur convex-demo.transload.it et le code source complet dans le dépôt GitHub.