Launch von Uppy 1.0: eine moderne Lösung für Datei-Uploads

Artur Paikin

Frontend-Entwickler und UI-Designer · London, Vereinigtes Königreich · Bio anzeigen

Heute, nach drei Jahren Entwicklung, veröffentlichen wir Version 1.0 von Uppy, unserem Dateiuploader für Webbrowser.

Ein wenig Geschichte

Vor drei Jahren war Transloadit bereit, das jQuery-basierte Plugin zum Hochladen und Verarbeiten von Dateien im Browser durch etwas Moderneres zu ersetzen. Das Team schaltete eine Stellenanzeige EN (English), um Menschen zu finden, die es bauen:

Generell suchen wir nach ausgefeilten, gut getesteten und sorgfältig gestalteten Produkten, mit denen die Arbeit und die Nutzung Freude machen. Für diese Stelle ist es deshalb nicht nur wichtig, dass Sie JavaScript beherrschen, sondern auch, wie man Dinge umwerfend aussehen lässt und für Endnutzer gut funktionieren lässt.

Zu Ihrer Verfügung stehen Zeit, Fokus und das Kernteam, das bereit ist, Feedback, Anleitung und alles andere zu liefern, was Sie brauchen.

Kurz darauf sah ich einen Retweet dieser Stellenanzeige in meiner Timeline und beschloss, mich zu bewerben. Kurz gesagt bin ich so in den frühesten Phasen des Projekts zu Uppy gekommen.

Ursprünglich war die Idee, einen proprietären Uploader zu bauen, der ausschließlich mit dem kommerziellen Dienst von Transloadit funktioniert, doch davon kamen wir schnell wieder ab. Wir hatten das Gefühl, dass unsere Version eines Dateiuploaders echte Wirkung entfalten könnte, wenn wir sie breiter verfügbar machen. Also entschieden wir uns, Uppy zu einer Open-Source-Lösung zu machen, so wie Transloadit es zuvor mit tus⁠ getan hatte – frei für alle, um sie zu nutzen und daran zu basteln. Die Transloadit-Unterstützung wurde zu einem optionalen Plugin.

Drei Jahre, 16.000 Stargazer⁠, Erwähnungen in Smashing Magazine⁠, JavaScript Daily⁠, Product Hunt⁠ und SurviveJS⁠ sowie eine blühende Community später – und wir könnten nicht glücklicher sein, endlich Uppy 1.0 zu veröffentlichen!

Warum überhaupt Uppy bauen?

Gelegentlich werden wir gefragt, warum man überhaupt mehr brauchen sollte als <input type="file">. Warum JS hier überhaupt ins Spiel bringen? Die Wahrheit ist: In vielen Fällen reicht <input type="file"> völlig aus.

Manchmal möchten Sie jedoch eine Drag-and-drop-Fläche mit Dateivorschauen oder eine Fortschrittsanzeige für Uploads hinzufügen, die browserübergreifend gut funktioniert. Webcam-Unterstützung kann nützlich sein. Darüber hinaus kann das direkte Auswählen von Dateien aus Instagram und Dropbox – ohne den Umweg über Ihr Mobiltelefon – viel Bandbreite und Akkulaufzeit sparen (Uploads mit Uppy und Companion laufen von Server zu Server). In all diesen Fällen brauchen Sie mehr als ein einfaches Tag wie <input type="file">.

Den Launch von Uppy v1.0 auf Product Hunt ansehen⁠.

Dann gibt es noch das Thema großer Dateien, bei denen Fortsetzbarkeit unverzichtbar ist. Es ist heutzutage schlicht inakzeptabel, einen Upload komplett neu starten zu müssen, nur weil das WLAN kurz ausgesetzt hat. Deshalb nutzt Uppy tus, das offene Protokoll für fortsetzbare Datei-Uploads.

All das verbessert die Nutzererfahrung deutlich, sodass mehr Dateien tatsächlich auf Ihrer Plattform ankommen und weniger Nutzer entnervt aufgeben und den Tab schließen. Das wird wichtig, wenn Uploads ein zentraler Aspekt Ihrer Website oder App sind. Uppy lässt sich auch allein mit einem JS-Tag ausliefern, mit einem vorhandenen <form> als Fallback (für IE6-Unterstützung! 😄) und Ihrem Apache/Nginx-Server.

Ein Team für Uppy aufbauen

Das Uppy-Team bestand zunächst aus mir⁠ und Harry⁠. Da ich für eine Weile nach New York gezogen war, während der Großteil des Teams in Europa saß, gewöhnten wir uns an sehr frühe (oder späte) Calls mit erheblichen Zeitverschiebungen.

Ich arbeitete überwiegend am Frontend und baute das, was heute als Dashboard⁠ bekannt ist – das voll ausgestattete und am häufigsten genutzte Uppy-Plugin. Harry übernahm die erste Version des damals sogenannten Uppy Server (heute Companion) – zuständig für das Auswählen von Dateien aus Google Drive, Instagram, entfernten URLs usw.

2016 hatte das Transloadit-Team ein Meetup in Amsterdam, bei dem ich auf höchst ungewöhnliche Weise anwesend⁠ war (in der Mitte):

Später in jenem Jahr stieß auch Ife⁠ zum Uppy-Team und übernahm die gesamte Arbeit an Companion.

Alle geplanten Uppy-Funktionen sauber umzusetzen, kostete viel Zeit. Zwei Jahre nachdem ich das Projekt bei Transloadit an Land gezogen hatte, schrieb ich selbst einen Beitrag mit einer Stellenanzeige EN (English), denn Uppy nahm allmählich ernsthafte Ausmaße an. So kam Renée⁠ ins Team (lustige Geschichte – wir lernten uns über die Zusammenarbeit auf GitHub an den Bibliotheken Choo und Yo-Yo kennen) und half uns bei den React-Komponenten für Uppy, der Redux-Integration, dem Plugin Golden Retriever und vielen weiteren coolen Funktionen.

Etwa zur selben Zeit kam auch Alex⁠ dazu, um uns beim UI-Design zu beraten, und vervollständigte damit das Uppy-Team in seiner heutigen Form.

Im Sommer 2017 traf sich das Transloadit-Team erneut, diesmal in Berlin, wo wir am Plugin Golden Retriever⁠ arbeiteten, das dabei hilft, Dateien nach Browser-Abstürzen wiederherzustellen. Wir spielten außerdem Mario Kart (ich habe verloren, trotz all der Übung!) und verkleideten uns als Figuren aus dem Spiel:

Lesen Sie mehr über Golden Retriever und dieses Teamtreffen⁠. Golden Retriever bekam auf Reddit und Hacker News gute Presse, weil es alles daransetzt, Dinge absurd zuverlässig zu machen. Im Demo-Video sehen Sie, wie wir unseren Browser mit kill -9 abschießen, ihn neu starten, und der Upload genau dort weitermacht, wo er aufgehört hat. Eine Premiere!

Herausforderung angenommen: nur 30 Tage bis zum Start

Wir hatten das 1.0-Release eine ganze Weile aufgeschoben. Es gibt immer noch eine Funktion, die man hinzufügen möchte, oder einen weiteren Bug, den man beheben will, bevor man etwas für ein 1.0-Release bereit erklärt. Ehrlich gesagt wird Uppy schon seit einiger Zeit in Produktion eingesetzt⁠, und obwohl wir häufig iterieren und Dinge ändern, hatte sich die API weitgehend stabilisiert.

Vor etwa einem Monat entschieden wir uns also, es durchzuziehen, und riefen innerhalb von Transloadit einen Uppy-Monat aus⁠. Das bedeutete, dass alle Teammitglieder mit anpackten und ihren Teil dazu beitrugen, den Start in dreißig Tagen zu sichern – auch jene, die nicht in erster Linie an Uppy arbeiten: das tus-Kernteam, unsere SDK-Teams sowie unsere Infra- und API-Engineers, Designer, Content-Autoren und die Gründer selbst. Wir baten außerdem Evgenia⁠, für diesen Monat dazuzustoßen und bei der Frontend-Arbeit zu helfen. Jede Woche hatten wir einen Call, in dem wir uns das Projektboard für Uppy 1.0 ansahen und über unseren Fortschritt sprachen:

Hier einige Highlights dessen, was wir in einem Monat voller Everything Uppy liefern konnten:

• Ein neues Design für die Uppy-Website.
• Lokalisierungsunterstützung und Sprachpakete⁠ für Russisch, Deutsch, Niederländisch und Französisch (weitere kommen aus der Community). Kevin⁠ und ich haben ein Skript geschrieben, das alle Uppy-Plugins im Repository durchläuft und daraus eine kanonische Datei namens en_US erzeugt, die als Grundlage für andere Übersetzungen dienen kann. Das Skript prüft sogar alle Übersetzungen auf fehlende Strings, sodass Sie wissen, welche Sie aktualisieren müssen.
• Drag and Drop im Dashboard⁠ ist ein wichtiger Teil von Uppy und wurde deutlich verbessert: Dateien und Links lassen sich nun sowohl aus dem Browser als auch vom Gerät einfügen. Sie können also zum Beispiel einen Link oder ein Bild aus einem anderen Tab zu Uppy ziehen!
• Grundlegende React-Native-Unterstützung (Beta)⁠: Uppy läuft in einer React-Native-Umgebung, wir haben ein Beispiel mit fortsetzbaren Uploads über tus, und die Expo-Komponente @uppy/react-native unterstützt das Auswählen von Bildern, Videos, Dokumenten und Dateien von entfernten URLs mithilfe von Companion.
• Design-Auffrischung⁠: Die Dashboard-UI wurde in den vergangenen Tagen deutlich verbessert: Es kamen neue Icons hinzu, dazu Feinschliff bei der Typografie, eine bessere Farborganisation, größere klickbare Flächen und mehr.
• Viele Probleme bei der Barrierefreiheit aufgedeckt.
• Robodog unterstützt jetzt ein Inline-Dashboard⁠.
• Die Struktur der Dokumentation wurde überarbeitet⁠.
• Transloadit Assemblies lassen sich jetzt ordnungsgemäß abbrechen⁠.
• Der Upload-Fortschritt wird mit XHR-upload und Companion genauer gemeldet⁠.
• Der Upload-Fortschritt wurde allgemein verbessert⁠.
• Die npm-Skripte wurden refaktoriert⁠ – ja, das ist wichtig!
• Und das Verrückteste: Unser Content-Team lief zur Hochform auf und hat in den vergangenen dreißig Tagen jeden Tag einen Beitrag veröffentlicht⁠, um Sie über unseren täglichen Fortschritt auf dem Laufenden zu halten.

Hinweis: Robodog ist veraltet. Verwenden Sie für neue Integrationen das Transloadit-Plugin⁠ von Uppy (Dashboard-UI oder eine eigene UI).

Welche Funktionen haben es in 1.0 geschafft? Und welche (noch) nicht?

Funktionsliste von Uppy 1.0:

• Elegante Benutzeroberfläche
• Leichtgewichtig und sparsam bei Abhängigkeiten
• Ein kleiner Kern mit modularer Architektur: Alles ist ein Plugin
• Nutzt modernes JavaScript, transpilierte ES5-Versionen liegen in lib, minifizierte Versionen zur direkten Nutzung im Browser in dist
• Nutzbar als Bundle direkt von einem CDN sowie als Modul zum Importieren
• Fortsetzbare Datei-Uploads über den offenen Standard tus
• Direkte Uploads zu S3
• Webcam-Unterstützung
• Dateien aus Dropbox, Google Drive und Instagram auswählen, während Server über Companion die schwere Arbeit übernehmen
• Robust: Retries für einfach alles
• Mit Blick auf Barrierefreiheit gebaut (noch nicht perfekt, aber wir verbessern es ständig)
• Dateiwiederherstellung (nach einem Browser-Absturz oder versehentlichem Navigieren) über Golden Retriever
• Locale-Unterstützung: Sprachen einfach wechseln oder eigene Texte hinterlegen
• Kompatibel mit React (React Native in Beta)
• Funktioniert hervorragend auf Mobilgeräten
• Funktioniert hervorragend mit Transloadit und ebenso hervorragend ohne

Zwei Funktionen haben wir außerdem „zurückgelassen“:

Vereinfachte Abkürzungen für Einsteiger anbieten (Voreinstellungen)

Wir hatten das Gefühl, dass Uppy unkompliziert genug zu nutzen ist und Voreinstellungen das am Ende weniger klar machen könnten. Robodog bietet zwar Integrationen mit weniger „Boilerplate“, das wurde aber als Wrapper umgesetzt und nicht als Voreinstellung.

Gestaltbare UI mit einer schönen Standardvariante

Statt auf { theme: 'dark' } zu setzen, bieten wir Theming ausschließlich über CSS an. Dafür lässt sich zum Beispiel die Media Query prefers-color-scheme nutzen.

Zu guter Letzt ist unsere Funktion „Dateien aus entfernten Quellen auswählen“ noch nicht ganz so ausgereift, wie wir es uns vielleicht gewünscht hätten, da Unterstützung für Google Photos, Box oder Facebook derzeit nicht enthalten ist. Wir hoffen, dass die Community hier helfen kann.

Wie geht es mit Uppy weiter?

Heißt das, Uppy ist perfekt? Nein!

Es gibt noch eine ganze Menge Issues⁠ und Punkte in unserem Backlog, und wir planen bereits Uppy 1.1⁠. Vielleicht möchten wir außerdem ein WordPress-Plugin veröffentlichen, Bildzuschnitt ergänzen und vieles mehr, doch wir veröffentlichen heute 1.0, weil es praktisch alle Funktionen enthält, die wir uns vorgenommen hatten. Diese Funktionen sind alle dokumentiert, und wir erwarten nicht, dass sich ihre APIs ändern. Sollten sie sich irgendwann doch ändern müssen, werden wir das mit Sorgfalt angehen, zum Beispiel mit einer 2.0-Version und allem Lärm, der dazugehört.

Uppy wird bereits ernsthaft von einer ernsthaft großen Community und von diversen ernstzunehmenden Unternehmen eingesetzt. Mit 1.0 signalisieren wir Ihnen daher auch: Hey, wir nehmen das ernst und ziehen Ihrer App nicht einfach so den Boden unter den Füßen weg. Und falls Uppy Ihre Datei-Uploads noch nicht antreibt, ist jetzt der beste Zeitpunkt, es auszuprobieren!

Wir hoffen, dass Ihre Nutzer von Uppy 1.0 genauso begeistert sind, wie wir es beim Entwerfen und Bauen waren. Ihre Unterstützung und Ihre Beiträge dabei zu erleben, hat den entscheidenden Unterschied gemacht. Vielen Dank! Und wenn Sie auf ProductHunt⁠, Hacker News⁠ oder Reddit⁠ einen Kommentar hinterlassen und uns Ihre schonungslose Meinung sagen, würde uns das unendlich viel bedeuten!

💡 Dieser Beitrag erschien zuerst im Uppy-Blog⁠.