# Convex

[transloadit/convex](https://github.com/transloadit/convex)

`@transloadit/convex` ist eine Convex-Komponente, mit der sich Transloadit nativ anfühlt. Sie signiert Upload-Optionen serverseitig, verifiziert Webhooks und speichert Ergebnisse in Convex, damit sich Ihre Benutzeroberfläche in Echtzeit aktualisieren kann.

## Installation

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_3z41v8VuCJJKgtsQfSKB6o2uiSXL)

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

```

## Einrichtung

1. Registrieren Sie die Komponente:

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_3z41v8VuCJJKgtsQfSKB6o2uiSXL)

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

```

1. Legen Sie Umgebungsvariablen fest:

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_3z41v8VuCJJKgtsQfSKB6o2uiSXL)

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

```

1. Erstellen Sie Aktionen mit `makeTransloaditAPI`:

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_3z41v8VuCJJKgtsQfSKB6o2uiSXL)

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

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

```

## Uppy-Client

Verwenden Sie Uppy mit `assemblyOptions()` aus Convex, damit geheime Daten nie in den Browser gelangen:

![](/_next/static/media/copy.04p1cju9qekk_.svg?dpl=dpl_3z41v8VuCJJKgtsQfSKB6o2uiSXL)

```ts
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
  },
})

```

## Demo-App

Sehen Sie sich die vollständige Hochzeitsgalerie-Demo unter[convex-demo.transload.it](https://convex-demo.transload.it/) und den vollständigen Quellcode im[GitHub-Repository](https://github.com/transloadit/convex) an.