friendsofredaxo / yform_dropzone

Erweitert YForm für REDAXO um Multiuploads mit Drag & Drop

Dropzone Multi-Upload-Feld mit Drag & Drop für YForm 4

Übersicht

Dieses Addon bindet dropzone.js ein und fügt YForm die Value dropzone hinzu. Diese bietet eine Möglichkeit, mehrere Dateien auf einmal hochzuladen.

Features

• Mehrere Dateien in ein YForm-Value hochladen
• Drag & Drop Upload im Frontend und im Table Manager
• Download der Dateien direkt aus der Tabellenübersicht des Table Managers
• Einschränkung maximale Dateigröße je Datei
• Einschränkung des Dateityps (Dateiendungen) sowohl clientseitig (Datei-Auswahl-Dialog des Betriebssystems), als auch serverseitig (Validierung)

Hinweis: Es sollte sichergestellt sein, dass der Webspace genügend Speicherplatz hat, um größere Mengen an Uploads problemlos abzuspeichern.

Erste Schritte

Setup

Nach der Installation ist das Feld in YForm verfügbar.

Feld hinzufügen (Table Manager)

1. In REDAXO auf YForm > Table Manager klicken
2. In der gewünschten Tabelle die Felddefinition editieren
3. Das Feld dropzone hinzufügen und den Instruktionen folgen
4. Lang-Parameter hinzufügen:

{
    "add":"Dateien hinzufügen",
    "start":"Upload starten",
    "clear":"zurücksetzen",
    "dictDefaultMessage":"Dateien auf dieses Feld ziehen",
    "dictFallbackMessage":"Ihr Browser untersützt leider keine Drag\'n\'Drop Datei Uploads",
    "dictFallbackText":"",
    "dictFileTooBig":"Datei ist zu groß",
    "dictInvalidFileType":"Dateityp wird nicht unterstützt",
    "dictResponseError":"Ein Fehler ist aufgetreten. Ein oder mehrere Dateien konnten nicht hochgeladen werden.",
    "dictCancelUpload":"abbrechen",
    "dictUploadCanceled":"Upload wurde abgebrochen",
    "dictCancelUploadConfirmation":"Upload wird abgebrochen",
    "dictRemoveFile":"entfernen",
    "dictRemoveFileConfirmation":"Datei wird entfernt",
    "dictMaxFilesExceeded":"Zuviele Dateien",
    "dictFileSizeUnits":"mb"
}

Anschließend kann das Feld verwendet werden.

Links und Hilfe

Hinweise und bekannte Probleme in dieser Version

ACHTUNG: Im Moment muss eine hidden-Value namens order_id im Formular vorhanden sein, das einen einmaligen Key generiert. Beteilige dich am Addon, um dieses Problem zu lösen. z.B.: $yform->setValueField('hidden', array('order_id',bin2hex(openssl_random_pseudo_bytes(16))));

Es wird jQuery benötigt.

Die Einstellung "Pflichtfeld" ist ohne Funktion

Debugging

Wenn was mit der Dropzone clientseitig schief läuft, ist das Problem entweder in der mitgelieferten JS-Datei in /assets/addons/yform_dropzone/js/, oder serverseitig in der API unter /redaxo/src/addons/yform_dropzone/lib/.

Erster Ansatz: Browser-Developer-Console liefert beim Fehler zusätzliche Infos als JSON in der Response, z.B. bei der Validierung (Dateigröße, Formate, oder, ob die Datei bereits vorhanden war).

Meist stimmt einfach was mit den Parametern der Validierung nicht.

Bugmeldungen Hilfe und Links

• Auf Github: https://github.com/FriendsOfREDAXO/yform_dropzone/issues
• im Forum: https://www.REDAXO.org/forum/
• im Slack-Channel: https://friendsofREDAXO.slack.com/

yform_dropzone's Issues

Kompatibilität mit E-Mail-Templates, SQL-Datensätzen überprüfen

Sodass der Dateiname der hochgeladenen Dateien überall verfügbar ist und verlinkt werden kann.

Download-Button im Table Manager anbieten

In der Listen-Übersicht und am Feld selbst den Download und das Löschen der Datei ermöglichen.

Usability: Fehlermeldungen ausgeben

Aus irgendeinem Grund werden Fehlermeldungen nicht ausgegeben, bspw. wenn die dropzone die Datei aufgrund von Dateigrößenbeschränkungen oder Dateiendungen ablehnt.

Description updaten

Die dropzone benötigt noch eine aktuelle description am Value-Feld. Die kann sich aber noch in Abhängigkeit der Definitionen ändern.

assets automatisch ins richtige Verzeichnis kopieren

Nämlich nicht direkt in assets/css und assets/js, sondern vom Addon/Plugin-Verzeichnis.

Doku-Seite schöner machen

Die verliert momentan das Menü von YForm.

@gharlan hast du mir einen Tipp, wie ich das richtig anlege in der package.yml oder wie kann ich das mit Menü (Addon-Menü oben) rendern?

Frontend Upload Sicherheitslücke?

Leider bekomme ich es nicht hin, das für jeden Besucher beim hochladen ein eigener Ordner genommen wird .
Wenn ich es mit zwei Nutzern teste, sieht jeder der Nutzer was der andere hochgeladen hat.

Die uniqueId wird irgendwie gar nicht durchgeschleift.

Warnings

Warning: array_merge() [function.array-merge]: Argument #2 is not an array in redaxo/src/addons/yform_dropzone/ytemplates/bootstrap/value.dropzone.tpl.php on line 25

Warning: Invalid argument supplied for foreach() in redaxo/src/addons/yform_dropzone/ytemplates/bootstrap/value.dropzone.tpl.php on line 29

Upload-Zielverzeichnis wie bei YForm upload-Feld wählen

Sprich im Backend ein Backend-Verzeichnis, im Frontend ein Frontend-Verzeichnis oder der Name der Tabelle.

REDAXO-Umgebung nutzen

an vielen Stellen wird mit $_FILES, $_SESSION, fopen() etc. gearbeitet. Hier sollten die üblichen Klassen/Methoden/Funktionen von REDAXO verwendet werden.

Doku: Sprachcodes-JSON

{
    "add":"Dateien hinzufügen",
    "start":"Upload starten",
    "clear":"zurücksetzen",
    "dictDefaultMessage":"Dateien auf dieses Feld ziehen",
    "dictFallbackMessage":"Ihr Browser untersützt leider keine Drag\'n\'Drop Datei Uploads",
    "dictFallbackText":"",
    "dictFileTooBig":"Datei ist zu groß",
    "dictInvalidFileType":"Dateityp wird nicht unterstützt",
    "dictResponseError":"Ein Fehler ist aufgetreten. Ein oder mehrere Dateien konnten nicht hochgeladen werden.",
    "dictCancelUpload":"abbrechen",
    "dictUploadCanceled":"Upload wurde abgebrochen",
    "dictCancelUploadConfirmation":"Upload wird abgebrochen",
    "dictRemoveFile":"entfernen",
    "dictRemoveFileConfirmation":"Datei wird entfernt",
    "dictMaxFilesExceeded":"Zuviele Dateien",
    "dictFileSizeUnits":"mb"
}

muss in die Felddefinition. Könnte man auch direkt bei der Eingabe der Parameter per default einfügen.

lang-Dateien anlegen und Platzhalter-Texte einfügen

Verzicht auf manuelles hidden-Feld

im Moment wird ein manuelles Hiddenfeld für einen unique key benötigt, um sich zu merken, welche Dateien hochgeladen wurden und auch um eindeutige Ordner pro Formular+Feld+Nutzer zu erzeugen.

Das müsste man sich vom upload-Feld aus YForm abgucken und dann an den richtigen Stellen korrigieren - im JS, in der Felddefinition und im Template.

PDF immer aktiviert

Als Dateiformat ist pdf immer aktiviert, wenn die Tabelle angelegt wird.
Wenn ich es lösche und speichere ist es beim nächsten Aufruf wieder da.

Settings als Tab in YForm

Min php version in package.yml ergänzen

Aktuell ist in der package.yml nix definiert

Abhängigkeit von JQuery lösen

dropzone.js ist prinzipiell ohne jQuery nutzbar - Bootstrap 3 erfordert hingegen jQuery.

Vielleicht findet man eine Lösung, die dropzone jQuery-frei zu halten.

Error / kein upload möglich: ErrorCode - InsertQueryError

Error while executing statement "INSERT INTO rex_dropzone SET dropzone = :dropzone" using params {"dropzone":null}! SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'dropzone' cannot be null

Weitere Validierungen hinzufügen (z.B. Pflichtfeld)

Die vom Upload-Feld bekannten Validierungen sollen auch mit Dropzone funktionieren, heißt:

• ist Pflichtfeld und ausgefüllt? - In der Umsetzung: gibt es zu dieser Session und zu dieser Tabelle und zu diesem Feld schon ein Verzeichnis mit Dateiinhalten?
• Dateigröße min/max pro Datei
• Dateiendung

Zudem als Idee

• Dateigröße min/max gesamt
• Dateianzahl min/max (clientseitig umgesetzt)

Unique-Key nicht aus PHPSESSID gewinnen

Der Denkansatz führt dazu, dass man fremden gegenüber die PHPSESSID offenbart. Hier sollte man, analog zum upload-Feld, einen eigenen Token generieren, anhand dessen man die Dateien zuordnet und im data-Verzeichnis ablegt.

Lizenz hinzufügen

body als dropzone target ermöglichen

wie besprochen...

Bootstrap 3.0-Kompatibilität von Haus aus

Der aktuelle Stand basiert auf einem anderen Projekt. Hier sollten wir den Quellcode austauschen, sodass dieser von Haus aus Bootstrap 3 kompatibel ist.

Vorlage:
https://www.dropzonejs.com/bootstrap.html#

Namen "yuploader" umbenennen

Finde yuploader ungeeignet. Je nachdem, ob der Code später in YForm landet, oder als Addon, würde ich das yform_dropzone nennen oder yform_uploder. der y-präfix ist Yakamara vorenthalten.

Feature: Dateien nach einer gewissen Zeit löschen

Sonst läuft der Speicher irgendwann voll...

Bug: Datensatz editieren geht nicht mehr

Das Dateianhang-Download-Skript funkt dazwischen und liefert die index.php als Download aus.

Umzug zu FOR

ich würde den aktuellen Stand jetzt gerne an FOR abgeben und hoffen, dass sich doch noch jemand daran beteiligt.

Das Addon hat jetzt einen prinzipiell funktionstüchtigen Zustand, auch wenn es noch nicht die Qualität hat, die ich mir gewünscht habe.

assets automatisch einbinden

und sicherstellen, dass das Skript nur 1x eingebunden wird.

Doku: Debugging

Grob gesagt:

Wenn was mit der Dropzone.js clientseitig schief läuft, ist das Problem entweder in der mitgelieferten JS-Datei in /assets/addons/yform_dropzone/js/, oder serverseitig in der API unter /redaxo/src/addons/yform_dropzone/lib/

Erster Ansatz: Browser-Developer-Console liefert beim Fehler zusätzliche Infos als JSON in der Response, z.B. bei der Validierung (Dateigröße, Formate, oder, ob die Datei bereits vorhanden war).

Meist stimmt einfach was mit den Parametern der Validierung nicht.