Convex + Transloadit: Uploads und Verarbeitung
Wir haben gerade @transloadit/convex auf npm veröffentlicht, eine neue Convex-Integration
für Transloadit, die Uploads, Dateiverarbeitung und Webhooks nahtlos integriert. Sie umfasst eine
sofort einsatzbereite Demo-App (Hochzeitsgalerie), eine Dokumentation zur Kombination mit dem
Uppy-Datei-Uploader und einfache serverseitige Hilfsfunktionen, die Geheimnisse vom Client fernhalten
und Manipulationen von Anfragen verhindern.
Das erhalten Sie
- Eine übersichtliche Einrichtung von Uppy +
@uppy/transloaditfür Browser-Uploads, die an Transloadit gesendet werden, mit optionalen Anweisungen zum Encoding. - Ein Convex-Modul, das Payloads empfangen, signieren und verifizieren sowie Referenzen auf Ergebnisse speichern kann.
- Eine in Next.js entwickelte Demo-Galerie, die diesen Ablauf durchgängig veranschaulicht.
- Eine Playwright-Testsuite, die sicherstellt, dass alles weiterhin funktioniert.
Kurz gesagt erhalten Sie schnelle und fortsetzbare Datei-Uploads (mit einer Größe von bis zu 200 GB), Video-Encoding, KI-Erkennung und eine Benutzeroberfläche, die sich in Echtzeit aktualisiert.
Live-Demo
Testen Sie die Demo-App!
Den Quellcode und die Dokumentation finden Sie hier.
So funktioniert es
- Die nutzende Person zieht Dateien in Uppy.
- Uppy erstellt eine Assembly und sendet Dateien und Instructions an Transloadit. Convex signiert diese Anfrage mit einem Geheimnis, das im Backend gespeichert ist, um Manipulationen zu verhindern.
- Die nutzende Person schließt den Upload ab und kann die Seite verlassen.
- Transloadit verarbeitet die Dateien, speichert die 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 wird in Echtzeit aktualisiert.
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-Aktionen, den Webhook und die Uppy-Konfiguration einzurichten.
Wenn Sie eine ausführbare Referenz-App wünschen, klonen Sie das Repository und führen Sie die Demo lokal aus.
Warum dieser Ansatz?
Convex eignet sich hervorragend für Echtzeitdaten und sichere Aktionen. Transloadit übernimmt die rechenintensiven Aufgaben wie Transcoding, Bildoperationen und Storage.
Gemeinsam ermöglichen sie Ihnen Folgendes:
- Geheimnisse in Convex-Aktionen schützen,
- Anfragen sicher signieren,
- Uploads mit der Geschwindigkeit und Zuverlässigkeit von tus skalieren,
- Webhooks ohne eigene Server verarbeiten,
- Ergebnisse in Ihrer Convex-Datenbank speichern und Empfänger benachrichtigen sowie
- schneller veröffentlichen!
Wie geht es weiter?
Die Convex-Integration für Transloadit hat derzeit noch nicht den Stand 1.0 erreicht. Wir werden möglicherweise die API-Oberfläche weiterentwickeln und die DX weiter optimieren, doch schon heute ist die Integration für reale Apps bereit. Transloadit und Uppy sind zuverlässige, bewährte Bausteine, die von großen Communitys unterstützt werden. Wenn Sie Convex nutzen und Dateiverarbeitung benötigen, probieren Sie die Integration aus und teilen Sie uns mit, welche Funktionen Sie sich als Nächstes wünschen.