Kostenloses ES5 / ES6-JavaScript-Datei-Upload-Plugin - Uppy

Eine der schwierigsten Formulareingaben zum Entwerfen ist die Datei-Upload. Es hat einen Standard-HTML-Stil, aber es ist nicht die schönste Sache der Welt.

Uppy nimmt mit a das Hochladen von Dateien auf ein völlig neues Niveau benutzerdefinierte Schnittstelle und ein Dynamischer Ladevorgang im Ajax-Stil.

Es läuft auf ES5 / ES6-Code, So können Sie Ihre Web-Apps mit den neuesten JavaScript-Standards erstellen. Und es sogar unterstützt das Hochladen von Dateien von Cloud-Speicher-Sites wie Dropbox oder Google Drive, so ist es eine Skript zum Hochladen von Dateien mit vielen Facetten für das Web.

Uppy ist völlig frei und Open-Source, mit einem Repo auf GitHub. Sie können dieses Plugin jedoch am einfachsten über npm oder Yarn installieren Führen Sie es wie ein echtes Paket aus.

Sobald Sie die Dateien auf Ihrer Website hinzugefügt haben, müssen Sie nur noch Fügen Sie die Datei Uppy.js und den CSS-Code hinzu. Dann zielen Sie auf das gewünschte Eingabefeld und Uppy kümmert sich um den Rest.

Es hat eine einzigartige Schnittstelle sieht aus wie eine große Platzierung Dateien per Drag & Drop ziehen. Du kannst auch Wählen Sie Elemente von Ihrer Festplatte aus oder auch Dateien remote von externen URLs hochladen. Ziemlich verrückt!

Sie finden den gesamten Einrichtungsprozess auf der Dokumentationsseite erfordert jedoch zumindest ein gewisses Verständnis von ECMAScript 6. Diese Bibliothek ist auf die Zukunft des Skripts ausgerichtet und kann nicht mit reinem Vanille-JavaScript verwendet werden.

Aber wenn Sie es mit Web-Entwicklung ernst meinen, sollten Sie ES6 trotzdem lernen. Sie können finden Tonnen von Ressourcen online für den Selbstunterricht und Sie können Uppy sogar als erstes verwenden “echt” Projekt zum Eintauchen und anfangen zu lernen.

Schauen Sie sich das Dashboard-Beispiel an Uppy in Aktion sehen. Für diese Seite die Upload ist hinter einem Auslöser versteckt, Klicken Sie auf die Schaltfläche, um ein modales Upload-Feld anzuzeigen.

Dort können Sie auswählen, ob Sie ein Bild hochladen möchten von Ihrem Computer, aus dem Internet oder sogar von Ihrer Webcam!

Die Beispielseite bietet eine Reihe von Suchfunktionen, einschließlich a Drag & Drop-Beispiel, zusammen mit einem Internationalisierte Demo-Seite.

Um wirklich zu erfahren, wie das funktioniert, empfehle ich, die Dokumente zu überfliegen und das GitHub-Repo zu durchsuchen. Sie können Ihre Gedanken auch mit den Erstellern auf Twitter @transloadit teilen.