Convex + Transloadit: Uploads und Verarbeitung
Wir haben soeben @transloadit/convex auf npm veröffentlicht: eine neue Convex-Integration
für Transloadit, die Uploads, Dateiverarbeitung und Webhooks nativ wirken lässt. Sie enthält eine
sofort ausführbare Demo-App (Hochzeitsgalerie), Dokumentation zur Kombination mit dem
Uppy-File-Uploader sowie einfache serverseitige Helfer, um Secrets vom Client fernzuhalten
und Request-Manipulationen zu vermeiden.
Was Sie erhalten
- Ein sauberes Uppy- +
@uppy/transloadit-Setup für Browser-Uploads, die an Transloadit gesendet werden, mit optionalen Encoding-Anweisungen. - Ein Convex-Modul, das Payloads annehmen, signieren, verifizieren und Referenzen auf Ergebnisse speichern kann.
- Eine in Next.js geschriebene Demo-Galerie, die diesen Ablauf durchgängig zeigt.
- Eine Playwright-Testsuite, die sicherstellt, dass alles funktionsfähig bleibt.
Kurz gesagt: Sie erhalten schnelle und fortsetzbare Datei-Uploads (bis zu 200 GB), Video-Encoding, KI-Erkennung und eine Benutzeroberfläche, die in Echtzeit aktualisiert wird.
Live-Demo
Probieren Sie die Demo-App aus!
Den Quellcode und die Dokumentation finden Sie hier.
So funktioniert es
- Der Benutzer zieht Dateien zu Uppy.
- Uppy erstellt eine Assembly und sendet Dateien sowie Instructions an Transloadit; Convex signiert diesen Request mit einem Secret, das im Back-End liegt, um Manipulationen zu vermeiden.
- Der Benutzer schließt den Upload ab und kann weg navigieren.
- Transloadit verarbeitet Dateien, speichert Ergebnisse gemäß den Instructions auf CloudFlare R2 und ruft den Convex-Webhook auf, sobald die Ergebnisse bereitstehen.
- Convex speichert Referenzen in seiner Datenbank, und die Galerie aktualisiert sich in Echtzeit.
Schnellstart
Installieren Sie die Convex-Komponente zusammen mit unserem Uploader für Webbrowser: Uppy.:
npm i @transloadit/convex @uppy/core @uppy/transloadit
Folgen Sie anschließend der README, um die Convex Actions, den Webhook und die Uppy-Konfiguration einzurichten.
Wenn Sie eine ausführbare Referenz-App wünschen, klonen Sie das Repo und starten Sie die Demo lokal.
Warum dieser Ansatz?
Convex ist hervorragend für Echtzeitdaten und sichere Actions geeignet. Transloadit übernimmt die Schwerarbeit, etwa Transcoding, Bildoperationen und Storage.
Kombiniert können Sie damit:
- Secrets in Convex Actions behalten,
- Requests sicher signieren,
- Uploads mit tus-gestützter Geschwindigkeit und Zuverlässigkeit skalieren,
- Webhooks ohne eigene Server verarbeiten,
- die Ergebnisse in Ihrer Convex-Datenbank speichern und Consumer benachrichtigen sowie
- schnell ausliefern!
Wie geht es weiter?
Die Convex-Integration für Transloadit ist aktuell noch nicht im 1.0-Status. Wir werden die API-Oberfläche möglicherweise weiter verfeinern und die DX weiter optimieren, aber die Integration ist bereits heute bereit für echte Apps. Transloadit und Uppy sind zuverlässige Bausteine mit bewährtem Track Record und werden von großen Communities getragen. Wenn Sie auf Convex entwickeln und Verarbeitung benötigen, probieren Sie es aus und sagen Sie uns, was Sie als Nächstes sehen möchten.