Convex

@transloadit/convex es un componente de Convex que hace que Transloadit se sienta nativo. Firma las opciones de subida en el servidor, verifica webhooks y almacena los resultados en Convex para que tu interfaz pueda actualizarse en tiempo real.

Instala

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

Configuración

Registra el componente:

// 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

Configura las variables de entorno:

npx convex env set TRANSLOADIT_KEY <your_auth_key>
npx convex env set TRANSLOADIT_SECRET <your_auth_secret>

Crea acciones con makeTransloaditAPI:

// convex/transloadit.ts
import { makeTransloaditAPI } from '@transloadit/convex'
import { components } from './_generated/api'

export const { createAssemblyOptions, queueWebhook, listResults } = makeTransloaditAPI(
  components.transloadit,
)

Cliente de Uppy

Usa Uppy con assemblyOptions() de Convex para que los secretos nunca lleguen al navegador:

import Uppy from '@uppy/core'
import Transloadit from '@uppy/transloadit'
import { api } from './_generated/api'

const uppy = new Uppy().use(Transloadit, {
  waitForEncoding: true,
  assemblyOptions: async () => {
    const { assemblyOptions } = await runAction(api.transloadit.createAssemblyOptions, {
      steps: {
        resized: {
          use: ':original',
          robot: '/image/resize',
          width: 800,
        },
      },
    })

    return assemblyOptions
  },
})

Aplicación de demostración

Consulta la demostración integral de una galería de bodas en convex-demo.transload.it y el código fuente completo en el repositorio de GitHub.