Datei-Upload für Frontend-Benutzer
Extension Key: pluploadfe
Einleitung
Mit dieser Extension haben Besucher einer Webseite die Möglichkeit, Dateien über das Frontend hochzuladen.
Dabei gibt es im Prinzip zwei Arten der Nutzung:
- Jeder Besucher der Seite kann Dateien hochladen. Das ist in der Regel für "normale" Webseiten im Internet eher nicht zu empfehlen, könnte aber für Intranets interessant sein.
- Nur angemeldete Frontend-Benutzer dürfen Dateien hochladen. Der Besucher muss sich also zuvor mit Benutzername und Passwort authentifizieren.
In der folgenden Video- und Textanleitung zeigen wir Installation und Konfiguration der Extension.
Bitte beachten
Falls nur angemeldete Frontend-Benutzer die Berechtigung zum Upload haben dürfen, müssen zuvor Frontend-Benutzergruppen und -benutzer angelegt werden. Ebenso muss eine Login-Möglichkeit vorhanden sein. Die Einrichtung und Konfiguration des Frontend-Logins wird in dieser Anleitung nicht gezeigt, dazu finden Sie diverse Anleitungen im Internet oder auf unserer Webseite.
Damit das Plugin im Frontend funktioniert, muss das JavaScript-Framework jQuery eingebunden sein. Sollte das auf Ihrer Webseite noch nicht der Fall sein, müssen Sie das vorher tun, ansonsten wird das Frontend-Plugin der Erweiterung nicht funktionieren.
Videoanleitung
Die Videoanleitung zeigt Installation und Nutzung der Extension.
Die Erweiterung installieren
Die Erweiterung kann wie üblich über den Extension Manager installiert werden. Suchen Sie dazu im Bereich Erweiterungen hinzufügen nach dem Extension-Key pluploadfe. Stellen Sie vorher sicher, dass die Liste der Erweiterungen aktuell ist.
Klicken Sie anschließend auf die Schaltfläche an der linken Seite, um die Erweiterungen zu installieren.
Statisches TypoScript-Template hinzufügen
Wechseln Sie in das Template-Modul in den Bereich Info & Bearbeiten, Vollständigen Template-Datensatz bearbeiten, um das statische TypoScript der Erweiterung Ihren TypoScript-Template hinzuzufügen.
Konfigurations-Datensatz erstellen
Im nächsten Schritt müssen Sie mindestens einen Konfigurations-Datensatz anlegen. Darüber wird z.B. geregelt, in welches Verzeichnis die Dateien geladen werden und ob ein Benutzer im Frontend angemeldet sein muss.
Dieser Datensatz kann auf einer beliebigen Seite oder einem Ordner angelegt werden. In diesem Beispiel legen wir einen Ordner mit der Bezeichnung Upload-Config an. Diese Bezeichnung ist natürlich völlig frei wählbar.
Wechseln Sie in das Listen-Modul auf diesen Ordner und legen Sie einen neuen Datensatz vom Typ Plupload Konfiguration an.
Im Reiter Allgemein können Sie einen beliebigen Titel vergeben.
Hier können Sie auch einstellen, ob ein Benutzer sich im Frontend zuerst mit seinem Benutzernamen und Passwort authentifizieren muss.
Im Reiter Upload-Ordner geben Sie im Feld Upload Pfad an, in welches Verzeichnis die Dateien hochgeladen werden sollen. Im Beispiel geben wir hier fileadmin/user_upload/ ein.
Optional können Sie bei Ordner aus Benutzer-Daten erstellen eine weitere Verzeichnisebene nach bestimmten Kriterien erstellen lassen. Im Beispiel wählen wir hier die Option Benutzername aus.
Das bedeutet, dass für jeden angemeldeten Benutzer ein eigener Ordner angelegt wird, zum Beispiel fileadmin/user_upload/maxmuster/
Im Reiter Datei-Restriktionen können Sie die Erlaubten Dateierweiterungen konfigurieren. Entfernen Sie unerwünschte Dateitypen aus der Liste oder fügen Sie weitere erlaubte Typen kommasepariert hinzu.
Das Frontend-Plugin anlegen
Auf der Seite, auf der das Upload-Plugin erscheinen soll, legen Sie ein neues Inhaltselement an. Im Reiter Plug-Ins finden Sie das Plug-In der Erweiterung.
Im Reiter Plug-In wählen Sie den zuvor angelegten Konfigurations-Datensatz aus.
Jetzt ist das Plug-In im Frontend schon zu sehen. Sollten Sie statt der Ansicht im Screenshot eine Fehlermeldung sehen, prüfen Sie, ob auch wirklich jQuery eingebunden ist (im <head>-Bereich des HTML-Quelltextes).
Sofern Sie im Konfigurations-Datensatz den Upload nur für authentifizierte Benutzer gestattet haben, sieht man als nicht-authentifizierter Benutzer zwar das Plug-In, kann aber keine Dateien hochladen.
Um das Plug-In für nicht-authentifizierte auszublenden, stellen Sie im Reiter Zugriff des Plug-Ins im Backend einfach ein, dass nur angemeldete Benutzer das Plug-In sehen dürfen.
Dateien können jetzt einfach per Drag'n Drop in den grauen Bereich gezogen werden.
Alternativ öffnet sich nach einem Klick auf die Schaltfläche Add Files ein Fenster, in dem Sie die gewünschten Dateien auswählen können.
Nachdem die Dateien hinzugefügt wurden, starten Sie das Hochladen durch einen Klick auf die Schaltfläche Start Upload.
Im Modul Dateiliste im Backend sollten jetzt, wenn alles funktioniert hat, die Dateien zu sehen sein.
Da wir in unserem Beispiel in der Konfiguration eingestellt hatten, dass ein Unterordner aus dem Benutzernamen erzeugt werden soll, sehen wir auf dem Screenshot ein entsprechendes Verzeichnis.