Convex + Transloadit : téléversements et traitement
Nous venons de publier @transloadit/convex sur npm, une nouvelle intégration
Convex pour Transloadit qui offre une expérience native pour
les téléversements, le traitement des fichiers et les webhooks. Elle comprend une application de
démonstration prête à lancer (galerie de mariage), une documentation expliquant comment l’associer à
l’outil de téléversement de fichiers Uppy, ainsi que des fonctions
utilitaires simples côté serveur pour garder les secrets hors du client et éviter l’altération des
requêtes.
Ce que vous obtenez
- Une configuration claire associant Uppy et
@uppy/transloaditpour téléverser des fichiers depuis le navigateur vers Transloadit, avec des instructions d’encodage facultatives. - Un module Convex qui peut recevoir, signer et vérifier des charges utiles, et enregistrer des références aux résultats.
- Une galerie de démonstration écrite en Next.js qui présente ce flux de bout en bout.
- Une suite de tests Playwright qui garantit que tout continue de fonctionner.
En bref, vous bénéficiez du téléversement rapide de fichiers avec reprise (jusqu’à 200 GB), de l’encodage vidéo, de la reconnaissance par IA et d’une interface utilisateur qui se met à jour en temps réel.
Démo interactive
Essayez l’application de démonstration !
Le code source et la documentation sont disponibles ici.
Fonctionnement
- L’utilisateur fait glisser des fichiers vers Uppy.
- Uppy crée une Assembly et envoie les fichiers et les Instructions à Transloadit. Convex signe cette requête avec un secret conservé côté serveur pour éviter toute altération.
- L’utilisateur termine le téléversement et peut quitter la page.
- Transloadit traite les fichiers, stocke les résultats sur CloudFlare R2 conformément aux Instructions et appelle le webhook Convex lorsque les résultats sont prêts.
- Convex enregistre les références dans sa base de données, et la galerie se met à jour en temps réel.
Démarrage rapide
Installez le composant Convex avec notre outil de téléversement pour navigateurs web, Uppy :
npm i @transloadit/convex @uppy/core @uppy/transloadit
Suivez ensuite le README pour connecter les actions Convex, le webhook et la configuration Uppy.
Si vous souhaitez une application de référence exécutable, clonez le dépôt et lancez la démo localement.
Pourquoi cette approche ?
Convex excelle dans la gestion des données en temps réel et des actions sécurisées. Transloadit prend en charge les opérations lourdes, comme le transcodage, les opérations sur les images et le stockage.
En les associant, vous pouvez :
- conserver les secrets dans les actions Convex,
- signer les requêtes de manière sécurisée,
- faire évoluer les téléversements grâce à la rapidité et à la fiabilité de tus,
- gérer les webhooks sans serveurs personnalisés,
- enregistrer les résultats dans votre base de données Convex et notifier les consommateurs, et
- livrer rapidement !
Quelle est la suite ?
L’intégration Convex pour Transloadit n’a pas encore atteint le stade de la version 1.0. Nous pourrons affiner l’interface de l’API et continuer à améliorer l’expérience de développement, mais l’intégration est dès aujourd’hui prête pour de vraies applications. Transloadit et Uppy sont des briques fiables qui ont fait leurs preuves et bénéficient du soutien de grandes communautés. Si vous développez avec Convex et avez besoin de traitement, essayez cette intégration et dites-nous ce que vous aimeriez voir ensuite.