Drag and Drop Upload mit HTML5

Wenn wir uns moderne Webseiten oder Content Management Systeme wie WordPress anschauen finden wir für Uploads immer öfter die Möglichkeit, Dateien einfach per Drag and Drop in den Browser zu ziehen und einen Live-Upload durchzuführen. Dadurch ersparen wir dem Besucher das lästige durchsuchen des Dateisystems und erlauben auch mehrere Uploads gleichzeitig. Außerdem können wir ein Livefeedback einbauen, wie weit der Upload bereits fortgeschritten ist.

Was benötigen wir alles für den Upload?

Zuerst benötigen wir ein HTML Element, auf das der Besucher seine Dateien ziehen kann. Dieses wird mit einem JavaScript drop Event versehen, welches eine Callback Funktion aufruft, sobald dies geschieht. Diese Funktion erhält eine Liste mit den Dateien, die dann ausgelesen werden können und per AJAX Request an den Webserver gesendet werden. Dort kann mithilfe von PHP der Upload verwertet werden. Über zusätzliche Callback Funktionen können wir außerdem den Uploadfortschritt dokumentieren und zum Beispiel eine Prozentangabe oder sogar einen Fortschrittsbalken darstellen.

Soviel zur Theorie, wenden wir uns der Praxis zu.

Schritt 1: Das HTML Gerüst

Unser HTML Gerüst besitzt nicht viele Voraussetzungen. Es muss einen Container geben, auf den das drop Event gelegt werden kann. Für mehr Feedback kann dieser Container natürlich mit CSS schön hervorgehoben werden und mit einem hover-Effekt versehen werden, der dem User anzeigt, was passiert.

Soweit so gut. Mit diesem Gerüst bieten wir dem Besucher die Möglichkeit, seine Dateien in den Browser zu ziehen und zeigen auch den Gesamtfortschritt des Uploads an. Machen wir nun mit dem ersten JavaScript Teil weiter – das drop Event.

 

Schritt 2: Das drop Event

Der nächste Schritt liegt darin, überhaupt mitzubekommen, wenn Dateien auf unsere dropzone gezogen werden. Dafür bietet JavaScript uns das drop Event an. Wir fügen also einen EventListener hinzu, der auf das drop Event horcht:

Als Callbackfunktion definieren wir die Funktion handleDropEvent. Diese erhält das Eventobjekt als Parameter, welches auch eine Liste mit den Dateien enthält, die der User hochladen möchte.

Neben dieser Funktion benötigen wir noch einige globale Variablen. Für den Anfang sieht unsere upload.js Datei also so aus:

 

Schritt 3: Eine Datei hochladen

Als nächstes kümmern wir uns darum, dass unsere Liste mit hochzuladenden Dateien abgearbeitet wird – eine Datei nach der anderen. Dafür definieren wir zwei Funktionen:

  • startNextUpload() überprüft die nächste Datei in der Liste
  • uploadFile() sendet eine Datei an den Server

In der startNextUpload() Funktion besteht die Möglichkeit, Dateien auch noch grundlegend zu validieren (zum Beispiel Maximalgröße).

Die uploadFile() Funktion enthält dann den XMLHttpRequest, der die Datei an den Server sendet – in diesem Fall an die upload.php, die wir als nächstes mit Inhalt füllen.

 

Schritt 4: Die Serverseite

Natürlich müssen wir auch auf unserem Webserver auf die Uploads reagieren. Das folgende Script erledigt hier nur die Grundlagen und muss natürlich für eine Liveversion noch um Dinge wie Sicherheit, Validierung und ähnliches erweitert werden.

 

Schritt 5: Weitere Events

Abschließend müssen wir uns noch um einige weitere Events kümmern, die bei unserem XMLHttpRequest auftreten können. Schließlich muss nach einem abgeschlossenen Upload der nächste gestartet werden und wir wollen unserem Besucher ja auch zeigen, wieviel schon geschafft ist. Zu diesem Zweck erweitern wir unsere uploadFile() Funktion noch um drei Eventlistener und definieren die dazu passenden Callbackfunktionen handleComplete(), handleError() und handleProgress().

Zuerst die Definition der drei Funktionen:

 

Und nun weisen wir diese Callbacks noch den jeweiligen Events zu. Dafür erweitern wir unsere uploadFile() Funktion um folgenden Abschnitt:

 

Damit wissen wir nun, wie wir unseren eigenen Fileupload schreiben können, den wir genau auf unsere Bedürfnisse anpassen. Soll es flexibler (und natürlich auch viel einfacher) sein können wir auch ein fertiges Script wie zum Beispiel Dropzone verwenden und auf unsere Bedürfnisse anpassen.

2 Kommentare zu “Drag and Drop Upload mit HTML5

  1. Hallo Frank, kannst du mir sagen, wie ich einrichte, dass ich per drag and drop einen file an meinen rest-server, der cherrypy benutzt, schicken kann, um dann den file dort abzuspeichern?

    • Hi Till,

      leider kenne ich mich mit CherryPy (oder allgemein Python) überhaupt nicht aus. Allerdings sollte das Prinzip dasselbe sein wie bei allen serverseitigen Sprachen, das heißt du hast einen Request, der deine Daten enthält (also die Datei die du hochladen möchtest) und empfängst diese Daten dann auf dem Server (in deinem Fall mit Python, das ist der Teil den du selbst rausfinden müsstest :)).
      Clientseitig musst du dabei einerseits dafür sorgen, dass du die richtige URL mit dem Request ansteuerst und andererseits, dass das richtige HTTP Verb (also POST z.B.) verwendet wird. Und natürlich die Datei mitsenden 🙂

      Viel Grüße
      Frank

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*