Wie erstelle ich einen JavaScript-Datei-Uploader?

Das Hochladen von Dateien ist eine grundlegende Funktion der meisten heutigen Webprojekte. Beispielsweise ermöglichen moderne Websites und Web-Apps wie Facebook, LinkedIn, Twitter, Coursera und viele mehr Endbenutzern, Dateien wie Bilder, Dokumente, Videos usw. hochzuladen. Darüber hinaus bieten Online-Tools wie Bildbearbeitungstools, Plagiatsprüfer, und PDF-zu-Word-Konverter ermöglichen Benutzern auch das Hochladen von Dateien. Manchmal benötigen interne Teams eine Datei-Upload-Funktion, um Produktvideos und -bilder hochzuladen. Während das Erstellen eines Datei-Uploaders eine Herausforderung sein kann, sind heute mehrere Tools und Bibliotheken von Drittanbietern verfügbar, mit denen Sie eine Datei-Upload-Funktion schnell in Ihr Projekt implementieren können. Wenn Sie jedoch einen Datei-Uploader, genauer gesagt einen JavaScript-Uploader, von Grund auf neu erstellen möchten, ist dieser Artikel der richtige Ort.

In diesem Artikel zeigen wir Ihnen, wie Sie einen JavaScript-Datei-Uploader mit Vanilla-JavaScript oder reinem JavaScript erstellen, ohne externe Bibliotheken zu verwenden.

Was sind die Funktionen eines Datei-Uploaders?

Wenn es darum geht, einen Datei-Uploader zu erstellen, müssen wir eine Front-End-Schaltfläche zum Hochladen von Dateien erstellen, die es Benutzern ermöglicht, ihre gewünschten Dateien auf die Website oder Web-App hochzuladen. Wir können auch das Hochladen mehrerer Dateien zulassen und Fortschrittsbalken für eine bessere Benutzererfahrung anzeigen. Darüber hinaus sollten wir auch Bildvorschauen anzeigen, wenn ein Benutzer eine Bilddatei hochlädt. Sobald die Datei hochgeladen ist, müssen wir sie lesen, an das Backend senden und auf dem Server speichern. Manchmal laden Benutzer große Dateien hoch, was zu langsamen Uploadern führt. Aus diesem Grund ist es am besten, große Dateien in Blöcken auf den Server hochzuladen, um Fehler zu vermeiden und die Geschwindigkeit zu verbessern. Diese Dateiblöcke sind besser zu verwalten als eine einzelne große Datei.

Darüber hinaus müssen Entwickler einen effizienten Datei-Uploader erstellen, der schnelle Uploads unterstützt. Sie müssen auch sicherstellen, dass ein Datei-Uploader sicher ist, um zu verhindern, dass Cyber-Angreifer Malware und Viren auf Ihrem Server installieren.

Wie erstelle ich einen JavaScript-Datei-Uploader?

Schritt 1: Einrichten der Serverseite

Wir verwenden das integrierte HTTP-Paket, um den Node.js-Server einzurichten. Wir beginnen mit der Erstellung eines neuen Ordners für das Projekt:

mkdir fileupload-service

Als Nächstes erstellen wir eine index.js-Datei. Dies wird der Einstiegspunkt unseres Servers sein.

Schließlich erstellen wir den HTTP-Server, der auf Port 8080 ausgeführt wird

Schritt 2: Erstellen des Front-Ends des JavaScript-Datei-Uploaders

Zum Erstellen des Frontends unseres JavaScript-Datei-Uploaders erstellen wir eine einfache HTML-Datei, die eine Schaltfläche zum Hochladen von Dateien anzeigt und Dateieingaben von Benutzern akzeptiert. Wir zeigen auch den Status des Datei-Uploads an. Sobald der Benutzer auf die Schaltfläche klickt, wird der Datei-Upload-Prozess initiiert.

Während wir eine einfache Schaltfläche zum Hochladen von Dateien erstellen, können Sie auch den Text der Schaltfläche bearbeiten oder die Farbe der Schaltfläche zu Designzwecken ändern.

Als Nächstes senden wir diese Datei vom Backend:

Schritt 3: Lesen der hochgeladenen Datei am Frontend

Um den Dateiinhalt am Frontend zu lesen, verwenden wir das Objekt „FileReader“. Es ermöglicht Web-Apps, den Dateiinhalt (der auf dem System des Benutzers gespeichert ist) asynchron zu lesen. Das 'FileReader'-Objekt bietet mehrere Methoden, um eine Datei zu lesen. Beispielsweise können wir die hochgeladene Datei als Array-Puffer oder in rohen Binärdaten lesen. Wir können die Datei sogar als Daten-URL lesen. Hier verwenden wir die Array-Methode, um die Datei zu lesen:

Die ausgewählten Dateien können unter dem Feld „Dateien“ für die Eingabe aufgerufen werden:

Das 'FileReader'-Objekt stellt auch mehrere Ereignis-Listener bereit, wie z. B. 'onprogress' und 'onload', um das Lesen der hochgeladenen Datei am Frontend zu verfolgen. Hier verwenden wir das Ereignis „onload“:

Schritt 4: Senden der hochgeladenen Datei an das Backend

Bevor wir die vom Benutzer hochgeladene Datei an das Backend senden, teilen Sie sie am besten in kleine Teile oder Teile auf und senden Sie die Dateiblöcke regelmäßig, insbesondere wenn die Dateigröße groß ist. Dies liegt daran, dass das Hochladen von sehr großen Dateien Probleme in Bezug auf Latenz und Geschwindigkeit verursachen kann. Außerdem laden Cyberangreifer manchmal auch zu große Dateien hoch, was zu Fehlfunktionen des Servers führen kann.

Also werden wir die Datei zuerst in Chunks aufteilen und sie einzeln an das Backend senden. Wir müssen auch sicherstellen, dass wir die Chunks der Reihe nach senden, damit die Datei nicht beschädigt wird. Wir werden auch „async await“ verwenden, damit wir den Server nicht mit Anfragen überlasten.

Schritt 5: Speichern der Dateiblöcke auf dem Server

Zuletzt erhalten wir die Chunks und speichern sie auf dem Server.

Das ist es. Wir haben jetzt einen vollständigen Einzeldatei-Uploader für das Hochladen von Javascript-Dateien. Wir können auch mehrere Datei-Uploads aktivieren, indem wir die Option „mehrere“ verwenden:

<input type="file" id="files" multiple>

Wir teilen jede Datei nacheinander in Stücke auf und senden sie an das Backend.

Fazit

Das Hochladen von Dateien ist ein wesentliches Merkmal vieler moderner Web-Apps und Websites. Wir können ein Datei-Upload-Tool eines Drittanbieters verwenden, z. B. eine JavaScript-Bibliothek oder eine Datei-Upload-API, um einen JavaScript-Datei-Upload schnell in unsere Apps zu implementieren. Sie können jedoch auch einen Datei-Uploader von Grund auf so erstellen, wie Sie es möchten. Sie können beispielsweise große Dateien in Chunks aufteilen und diese einzeln an das Backend senden. In diesem Artikel haben wir einen JavaScript-Datei-Uploader mit Vanilla JS von Grund auf neu erstellt.