Lancement d’Uppy 1.0 : une solution moderne de téléversement de fichiers

Aujourd’hui, après trois ans de développement, nous lançons la version 1.0 d’Uppy, notre outil de téléversement de fichiers pour navigateurs web.

Un peu d’histoire

Il y a trois ans, Transloadit était prêt à remplacer son plugin de téléversement et de traitement de fichiers pour navigateurs, basé sur jQuery, par quelque chose de plus moderne. L’entreprise a publié une offre d’emploi EN (English) pour trouver des personnes capables de le développer :

En général, nous recherchons des produits soignés, bien testés et conçus avec attention, avec lesquels il est agréable de travailler et qu’on a plaisir à utiliser. Pour ce poste, il ne suffit donc pas de connaître JavaScript : il faut aussi savoir rendre les choses superbes et agréables à utiliser pour les utilisateurs finaux.

Vous disposerez de temps, de concentration et d’une équipe principale prête à vous apporter retours, conseils et tout ce dont vous aurez besoin.

Peu après, j’ai vu passer un retweet de cette offre dans mon fil et j’ai décidé de postuler. Voilà, en résumé, comment j’ai commencé à travailler sur Uppy dès les tout premiers stades du projet.

Au départ, l’idée était de créer un outil de téléversement propriétaire qui fonctionnerait exclusivement avec le service commercial de Transloadit, mais nous avons rapidement changé d’avis. Nous pensions que notre version d’un outil de téléversement de fichiers pourrait avoir un réel impact si nous la rendions plus largement disponible. Ainsi, comme Transloadit l’avait fait auparavant avec tus⁠, nous avons décidé de faire d’Uppy une solution open source — que chacun peut utiliser et bidouiller gratuitement. La prise en charge de Transloadit est devenue un plugin optionnel.

Trois ans, 16 000 stargazers⁠, des articles sur Smashing Magazine⁠, JavaScript Daily⁠, Product Hunt⁠ et SurviveJS⁠, et une communauté florissante plus tard — nous ne pourrions être plus heureux de lancer enfin Uppy 1.0 !

Pourquoi créer Uppy, au fond ?

On nous demande parfois pourquoi nous aurions besoin de quoi que ce soit au-delà de <input type="file">. Pourquoi faire intervenir du JS ? En vérité, dans bien des cas, <input type="file"> suffit.

Parfois, cependant, vous aimeriez ajouter une zone de glisser-déposer avec aperçu des fichiers, ou un suivi de la progression du téléversement qui fonctionne bien sur tous les navigateurs. La prise en charge de la webcam pourrait être utile. Par ailleurs, sélectionner des fichiers directement depuis votre Instagram et votre Dropbox — sans passer d’abord par votre téléphone — peut faire économiser beaucoup de bande passante et de batterie (les téléversements avec Uppy et Companion se font de serveur à serveur). Dans tous ces cas, il vous faudra plus qu’une simple balise <input type="file">.

Voir le lancement d’Uppy v1.0 sur Product Hunt⁠.

Il y a aussi la question des fichiers volumineux, pour lesquels la reprise des transferts est essentielle. De nos jours, il est tout simplement inacceptable de devoir recommencer un téléversement de zéro parce que votre Wi-Fi a eu un raté. C’est pourquoi Uppy utilise tus, le protocole ouvert pour la reprise des téléversements de fichiers.

Tous ces éléments améliorent nettement l’expérience utilisateur, au point que davantage de fichiers parviennent réellement jusqu’à votre plateforme et que moins d’utilisateurs abandonnent rageusement en fermant l’onglet. Ils deviennent importants lorsque le téléversement est au cœur de votre site web ou de votre application. Uppy peut aussi être déployé avec une simple balise JS, en s’appuyant sur un <form> existant comme solution de repli (pour prendre en charge IE6 ! 😄), et votre serveur Apache/Nginx.

Constituer une équipe pour créer Uppy

L’équipe Uppy se composait d’abord de moi-même⁠ et de Harry⁠. Comme j’ai passé un moment à New York alors que la majeure partie de l’équipe était basée en Europe, nous avons pris l’habitude d’appels très tôt (ou très tard), avec d’importants décalages horaires.

Je travaillais surtout sur le frontend et je développais ce que l’on connaît aujourd’hui sous le nom de Dashboard⁠ — le plugin Uppy le plus complet et le plus utilisé. Harry s’est chargé de la première version de ce qui s’appelait alors Uppy Server (aujourd’hui Companion) — responsable de la sélection de fichiers depuis Google Drive, Instagram, des URL distantes, etc.

En 2016, l’équipe Transloadit s’est réunie à Amsterdam, et j’ai fini par y participer⁠ d’une manière des plus inhabituelles (au centre) :

Plus tard cette année-là, Ife⁠ a également rejoint l’équipe Uppy et a repris tout le travail sur Companion.

Développer correctement toutes les fonctionnalités prévues pour Uppy a pris beaucoup de temps. Ainsi, deux ans après avoir rejoint le projet chez Transloadit, c’était à mon tour de rédiger moi-même une offre d’emploi EN (English), car Uppy commençait à prendre des proportions sérieuses. C’est ainsi que Renée⁠ a rejoint l’équipe (anecdote amusante — nous avons fait connaissance en collaborant sur GitHub autour des bibliothèques Choo et Yo-Yo) pour nous aider avec les composants React d’Uppy, l’intégration Redux, le plugin Golden Retriever et bien d’autres fonctionnalités sympas.

À peu près à la même époque, Alex⁠ a aussi rejoint l’équipe pour nous conseiller sur le design de l’interface, complétant ainsi l’équipe Uppy telle qu’elle existe encore aujourd’hui.

À l’été 2017, l’équipe Transloadit s’est de nouveau réunie, cette fois à Berlin, où nous avons travaillé sur le plugin Golden Retriever⁠, qui permet de récupérer des fichiers après un plantage du navigateur. Nous avons aussi joué à Mario Kart (j’ai perdu, malgré tout mon entraînement !) et nous nous sommes déguisés en personnages du jeu :

Découvrez-en plus sur Golden Retriever et cette rencontre d’équipe⁠. Golden Retriever a été bien accueilli sur Reddit et Hacker News, car il va bien au-delà de l’ordinaire pour rendre les choses d’une fiabilité absurde. Dans la vidéo de démonstration, on nous voit faire un kill -9 de notre navigateur, le redémarrer, et le téléversement reprend exactement là où il s’était arrêté. Une première !

Défi accepté : seulement 30 jours avant le décollage

Nous repoussions la sortie de la version 1.0 depuis un bon moment. Il y a toujours une fonctionnalité de plus à ajouter ou un autre bug à corriger avant de déclarer quelque chose prêt pour une version 1.0. À vrai dire, Uppy était déjà utilisé en production⁠ depuis un moment, et même si nous itérons et changeons souvent les choses, l’API s’était en grande partie stabilisée.

Il y a environ un mois, nous avons donc décidé de nous lancer et annoncé un Uppy Month⁠ au sein de Transloadit. Ainsi, tous les membres de l’équipe, y compris ceux qui ne travaillaient pas principalement sur Uppy — l’équipe principale de tus, nos équipes chargées des SDK, ainsi que nos ingénieurs infrastructure et API, nos designers, nos rédacteurs de contenu et les fondateurs eux-mêmes — ont mis la main à la pâte et apporté leur contribution pour assurer le décollage en trente jours. Nous avons aussi demandé à Evgenia⁠ de nous rejoindre pendant ce mois pour prêter main-forte sur le frontend. Chaque semaine, nous faisions un appel pour examiner le tableau du projet Uppy 1.0 et faire le point sur nos progrès :

Voici quelques temps forts de ce que nous avons réussi à livrer pendant ce mois entièrement consacré à Uppy :

• Un nouveau design pour le site web d’Uppy.
• Prise en charge de la localisation et packs de langue⁠ pour le russe, l’allemand, le néerlandais et le français (d’autres arrivent grâce à la communauté). Kevin⁠ et moi avons écrit un script qui parcourt tous les plugins Uppy du dépôt et génère un en_US canonique pouvant servir de base à d’autres traductions. Le script vérifie même les chaînes manquantes dans toutes les traductions, pour que vous sachiez lesquelles mettre à jour.
• Le glisser-déposer dans le Dashboard⁠, élément important d’Uppy, a été nettement amélioré avec la prise en charge du collage de fichiers et de liens depuis le navigateur comme depuis l’appareil. Vous pouvez donc désormais, par exemple, glisser un lien ou une image depuis un autre onglet vers Uppy !
• Prise en charge basique de React Native (bêta)⁠ : Uppy fonctionne dans un environnement React Native, nous proposons un exemple de téléversements avec reprise via tus, ainsi que la prise en charge du composant Expo @uppy/react-native pour sélectionner des images, des vidéos, des documents et des fichiers depuis des URL distantes, grâce à Companion.
• Coup de jeune pour le design⁠ : l’interface du Dashboard a été nettement améliorée ces derniers jours, avec de nouvelles icônes, une typographie peaufinée, une meilleure organisation des couleurs, des zones cliquables agrandies, et plus encore.
• De nombreux problèmes d’accessibilité ont été mis au jour.
• Robodog prend désormais en charge un Dashboard intégré à la page⁠.
• La structure de la documentation a été remaniée⁠.
• Les Assemblies Transloadit peuvent désormais être correctement annulées⁠.
• La progression du téléversement est indiquée plus précisément avec XHR-upload et Companion⁠.
• La progression du téléversement a été améliorée de manière générale⁠.
• Les scripts npm ont été refactorisés⁠ — oui, c’est important !
• Et le plus fou : notre équipe de contenu a enchaîné et publié un article chaque jour⁠ pendant les trente derniers jours pour vous tenir informés de nos progrès au quotidien.

Remarque : Robodog est désormais déprécié. Pour les nouvelles intégrations, utilisez le plugin Transloadit⁠ d’Uppy (interface Dashboard ou interface personnalisée).

Quelles fonctionnalités figurent dans 1.0 ? Et lesquelles n’y sont pas (encore) ?

Liste des fonctionnalités d’Uppy 1.0 :

• Interface utilisateur élégante
• Léger et sobre en dépendances
• Un petit noyau à l’architecture modulaire : tout est plugin
• Utilise du JavaScript moderne, avec des versions ES5 transpilées disponibles dans lib et des versions minifiées dans dist pour une utilisation directe par les navigateurs
• Utilisable comme bundle directement depuis un CDN, ou comme module à importer
• Reprise des téléversements de fichiers grâce au standard ouvert tus
• Téléversements directs vers S3
• Prise en charge de la webcam
• Sélection de fichiers depuis Dropbox, Google Drive et Instagram, en laissant les serveurs faire le gros du travail via Companion
• Robuste : de nouvelles tentatives pour absolument tout
• Conçu en pensant à l’accessibilité (pas encore parfait, mais nous nous améliorons en permanence)
• Récupération de fichiers (après un plantage du navigateur ou une navigation accidentelle) grâce à Golden Retriever
• Prise en charge des langues : changez facilement de langue ou fournissez vos propres textes
• Compatible avec React (React Native en bêta)
• Fonctionne très bien sur mobile
• Fonctionne très bien avec Transloadit, comme sans

Nous avons aussi laissé deux fonctionnalités « de côté » :

Proposer des raccourcis simplifiés pour les débutants (préréglages)

Nous avons estimé qu’Uppy était assez simple à utiliser, et que des préréglages risquaient de rendre les choses moins claires. Robodog propose bien des intégrations moins « verbeuses », mais sous la forme d’une surcouche plutôt que d’un préréglage.

Interface personnalisable par thèmes, avec un bel aspect par défaut

Plutôt que d’opter pour { theme: 'dark' }, nous proposons uniquement la personnalisation des thèmes via CSS. Il est par exemple possible d’utiliser la requête média prefers-color-scheme pour cela.

Enfin, notre fonctionnalité de « sélection de fichiers depuis des sources distantes » n’est pas aussi complète que nous l’aurions peut-être souhaité, puisque la prise en charge de Google Photos, Box ou Facebook n’est actuellement pas incluse. Nous espérons que la communauté pourra nous aider sur ces points.

Et maintenant, quelle suite pour Uppy ?

Cela signifie-t-il qu’Uppy est parfait ? Non !

Il reste encore pas mal de tickets⁠ et d’éléments dans notre backlog, et nous planifions déjà Uppy 1.1⁠. Nous aimerions aussi, peut-être, publier un plugin WordPress, ajouter le recadrage d’images, et bien plus encore, mais nous publions la version 1.0 aujourd’hui car elle contient pratiquement toutes les fonctionnalités que nous avions prévu d’implémenter. Ces fonctionnalités sont toutes documentées et nous ne prévoyons pas de modification de leurs API. Si, à un moment donné, elles doivent changer, nous devrons le faire avec précaution. Par exemple, en publiant une version 2.0 et en faisant tout le bruit qui va avec.

Uppy est déjà utilisé sérieusement par une communauté sérieusement grande et par diverses entreprises sérieuses. Avec la version 1.0, nous vous signalons donc aussi : hé, nous prenons cela au sérieux, et nous n’allons pas changer les choses dans le dos de votre application, comme ça, du jour au lendemain. Et si Uppy ne gère pas encore vos téléversements de fichiers, c’est le meilleur moment pour l’essayer !

Nous espérons que vos utilisateurs seront aussi ravis d’Uppy 1.0 que nous l’avons été en le concevant et en le développant. Voir votre soutien et vos contributions tout au long de ce travail a tout changé. Merci infiniment ! Et si vous pouviez laisser un commentaire sur ProductHunt⁠, Hacker News⁠ ou Reddit⁠ pour nous donner votre avis sans détour, cela compterait énormément pour nous !

💡 Cet article a d’abord été publié sur le blog d’Uppy⁠.