Skip to content

KLXM/filepond_uploader

BranchesTags

Repository files navigation

KLXM FilePond Uploader für REDAXO

Ein moderner Datei-Uploader für REDAXO mit Chunk-Upload und nahtloser Medienpool-Integration.

Screenshot

Dieser Uploader wurde mit Blick auf Benutzerfreundlichkeit (UX), Barrierefreiheit und rechtliche Anforderungen entwickelt. Er bietet eine moderne Drag-and-Drop-Oberfläche und integriert sich nahtlos in den REDAXO-Medienpool.

Hauptmerkmale

  • Chunk-Upload als Kernfeature:

    • Zuverlässiges Hochladen großer Dateien in kleinen Teilen (Chunks)
    • Einstellbare Chunk-Größe (Standard: 5MB)
    • Fortschrittsanzeige für einzelne Chunks und die Gesamtdatei
    • Automatisches Zusammenführen der Chunks nach dem Upload

  • Verzögerter Upload-Modus:

    • Auswahl und Anordnung von Dateien vor dem Upload
    • Trennung von Dateiauswahl und Upload-Prozess
    • Benutzerfreundlicher Upload-Button erscheint automatisch
    • Löschen unerwünschter Dateien vor dem Upload
    • Ideal für Redakteure mit vielen Dateien

  • Moderne Oberfläche:

    • Drag & Drop für einfaches Hochladen von Dateien
    • Live-Vorschau der Bilder während des Uploads
    • Responsives Design für alle Bildschirmgrößen

  • Automatische Bildoptimierung:

    • Verkleinerung großer Bilder auf konfigurierbare Maximalgröße
    • Einstellbare Kompressionsqualität für JPEG/PNG/WebP
    • Beibehaltung der Originaldimensionen für GIF-Dateien
    • Optionale Erstellung von Thumbnails

  • Barrierefreiheit & rechtliche Sicherheit:

    • Erzwingt das Setzen von Alt-Texten für Bilder
    • Legt automatisch Metafelder an, falls sie noch nicht existieren
    • Optionale Abfrage des Copyrights und der Beschreibung für Mediendateien

  • YForm-Integration:

    • Spezielles YForm-Value-Feld mit automatischer Löschung nicht verwendeter Medien
    • Multi-Upload-Unterstützung mit dynamischer Vorschau
    • Einfache Konfiguration über bekannte YForm-Schnittstellen

  • Mehrsprachigkeit:

    • Verfügbar in Deutsch (DE) und Englisch (EN)
    • Einfach erweiterbar für weitere Sprachen

  • Sichere API:

    • Token-basierte Authentifizierung für externe Zugriffe
    • Unterstützung für YCOM-Benutzerauthentifizierung
    • Validierung von Dateitypen und -größen

  • Info Center Integration:

    • Upload-Widget direkt im REDAXO Info Center Dashboard
    • Schneller Zugriff ohne Medienpool zu öffnen
    • Kategorie-Auswahl mit rex_media_category_select
    • Automatische Positionierung nach TimeTracker Widget
    • Respektiert alle FilePond-Konfigurationen und Benutzerberechtigungen

  • Media Widget Integration:

    • Nahtlose Integration mit REX_MEDIA und REX_MEDIALIST Widgets
    • Direkter Upload von Dateien in Formularfelder
    • Bildvorschau mit Thumbnails für bessere Übersicht
    • Bulk-Übernahme für Medienlisten
    • Mehrsprachige Benutzeroberfläche

  • Wartungswerkzeuge:

    • Einfache Bereinigung temporärer Dateien und Chunks
    • Protokollierung aller Upload-Vorgänge
    • Admin-Interface zur Systemwartung

Installation

  1. AddOn installieren: Installiere das AddOn "filepond_uploader" über den REDAXO-Installer.
  2. AddOn aktivieren: Aktiviere das AddOn im Backend unter "AddOns".
  3. Konfigurieren: Passe die Einstellungen unter "FilePond Uploader > Einstellungen" an deine Bedürfnisse an.
  4. Fertig: Der Uploader ist nun einsatzbereit!

Schnellstart

Info Center Upload Widget

Das FilePond AddOn bietet ein praktisches Upload-Widget im Info Center des REDAXO-Backends. Dieses Widget ermöglicht das schnelle Hochladen von Dateien direkt aus dem Dashboard heraus, ohne den Medienpool öffnen zu müssen.

Features des Info Center Widgets

Schneller Zugriff:

  • Upload-Funktionalität direkt im Info Center verfügbar
  • Kein Wechsel zum Medienpool erforderlich
  • Kompakte Darstellung ohne Dashboard zu verlassen

Vollständige FilePond-Integration:

  • Alle konfigurierten FilePond-Einstellungen werden übernommen
  • Drag & Drop Upload direkt im Info Center
  • Chunk-Upload für große Dateien
  • Bildoptimierung und Metadaten-Eingabe

Kategorie-Auswahl:

  • Dropdown zur Auswahl der Zielkategorie
  • Verwendet den Standard rex_media_category_select
  • Respektiert Benutzerberechtigungen für Kategorien

Intelligente Positionierung:

  • Erscheint automatisch nach dem TimeTracker Widget
  • Nur für angemeldete Benutzer sichtbar
  • Robuste Erkennung verfügbarer AddOns

Aktivierung

Das Info Center Widget wird automatisch aktiviert, wenn folgende Bedingungen erfüllt sind:

  1. Info Center AddOn installiert: Das REDAXO Info Center AddOn muss aktiviert sein
  2. FilePond Uploader aktiv: Dieses AddOn muss aktiviert sein
  3. Benutzer angemeldet: Widget erscheint nur für angemeldete Backend-Benutzer

Hinweis: Das Widget wird automatisch zwischen TimeTracker und anderen Widgets positioniert (Priorität 0.5). Es sind keine weiteren Konfigurationen erforderlich.

Widget-Funktionalität

Upload-Formular:

  • Identische Struktur wie die Medienpool-Upload-Seite
  • Kategorie-Auswahl mit allen verfügbaren Medienpool-Kategorien
  • Automatische Aktualisierung bei Kategorie-Wechsel
  • Respektiert alle FilePond-Konfigurationen (Dateitypen, Größenlimits, etc.)

Metadaten-Eingabe:

  • Vollständige Integration der Metadaten-Dialoge
  • Unterstützung für mehrsprachige Felder (MetaInfo Lang Fields)
  • Validierung nach konfigurierten Regeln
  • Alt-Text und Copyright-Abfrage wie gewohnt

Benutzerfreundlichkeit:

  • Drag & Drop direkt im Widget
  • Live-Vorschau hochgeladener Dateien
  • Fortschrittsanzeige und Chunk-Upload
  • Nahtlose Integration in die REDAXO-Oberfläche

Deaktivierung

Falls das Info Center Widget nicht gewünscht ist, kann es durch Deaktivierung des Info Center AddOns oder durch Customizing in der boot.php entfernt werden.

Media Widget Integration

Das FilePond AddOn bietet eine nahtlose Integration mit REDAXO's Standard Media Widgets (REX_MEDIA und REX_MEDIALIST). Nach dem Upload können Dateien direkt in Formularfelder übernommen werden.

Verwendung

  1. Öffne ein Media Widget: Klicke in einem beliebigen Formular auf das "Öffnen" Icon neben einem REX_MEDIA oder REX_MEDIALIST Feld
  2. Upload-Modus aktiviert: FilePond erkennt automatisch den Widget-Kontext und zeigt einen Info-Banner
  3. Dateien hochladen: Nutze die gewohnte Drag&Drop oder Auswahl-Funktionalität
  4. Direktübernahme: Nach erfolgreichem Upload erscheinen Buttons zur direkten Übernahme

Features der Media Widget Integration

Für REX_MEDIA (Einzelmedien):

  • Upload → Übernahme → Fenster schließt sich automatisch
  • Bildvorschau mit 80x80px Thumbnails
  • Dateitypspezifische Icons für Nicht-Bild-Dateien

Für REX_MEDIALIST (Medienlisten):

  • Upload → Fenster bleibt offen für weitere Uploads
  • Einzelne Übernahme pro Datei möglich
  • "Alle übernehmen" Button bei mehreren Dateien
  • Duplikat-Schutz verhindert doppelte Einträge
  • Visuelles Feedback mit "Hinzugefügt" Status

Bildvorschau-System

Das AddOn zeigt automatische Vorschauen für hochgeladene Inhalte:

Bilder (jpg, png, gif, webp, etc.):

  • 80x80px Thumbnail-Vorschau
  • Proportionale Skalierung mit object-fit
  • Fallback auf Dateitype-Icon bei Fehlern

Andere Dateitypen:

  • Farbcodierte Icons nach Dateityp
  • PDF (rot), Word (blau), Excel (grün), etc.
  • Dateiendung als Label unter dem Icon

Mehrsprachige Benutzeroberfläche

Die Media Widget Integration unterstützt vollständige Mehrsprachigkeit:

Deutsch:

  • "Upload-Auswahl"
  • "Die ausgewählten Elemente können in die Liste übernommen werden."

English:

  • "Upload Selection"
  • "The selected items can be added to the list."

Hinweis: Die Media Widget Integration ist ein Add-On Feature und erfordert keine zusätzliche Konfiguration. Sie funktioniert automatisch mit allen bestehenden REX_MEDIA und REX_MEDIALIST Feldern.

Verwendung als YForm-Feldtyp

$yform->setValueField('filepond', [
    'name' => 'bilder',
    'label' => 'Bildergalerie',
    'allowed_max_files' => 5,
    'allowed_types' => 'image/*',
    'allowed_filesize' => 10,
    'category' => 1,
    'delayed_upload' => 0
]);

Option: delayed_upload

Mit der Option delayed_upload wird gesteuert, wann die Dateien tatsächlich hochgeladen und mit dem Formular verknüpft werden:

Wert Verhalten Typischer Einsatzzweck
0 Dateien werden sofort beim Auswählen hochgeladen. Standardverhalten, z. B. Bildergalerien
1 Dateien werden erst hochgeladen, wenn der Nutzer den Upload-Button klickt. Wenn mehrere Dateien gesammelt und gemeinsam hochgeladen werden sollen (z. B. Bewerbungsunterlagen)
2 Nach dem Upload wird die YForm sofort automatisch abgesendet. Schnell-Upload-Formulare. Hier sollten alle übrigen Felder des Formulars clientseitig auf required geprüft werden, da die Dateien sonst bereits hochgeladen werden, auch wenn die Formularvalidierung fehlschlägt.

Hinweis:
Das filepond-Value-Feld in YForm ist eine bequeme Möglichkeit, den Uploader zu verwenden.
Alternativ kann ein normales Input-Feld mit den notwendigen data-Attributen versehen werden.
In diesem Fall entfällt jedoch die automatische Löschung nicht verwendeter Medien.

Verwendung in Modulen

Eingabe

<input
    type="hidden"
    name="REX_INPUT_VALUE[1]"
    value="REX_VALUE[1]"
    data-widget="filepond"
    data-filepond-cat="1"
    data-filepond-maxfiles="5"
    data-filepond-types="image/*"
    data-filepond-maxsize="10"
    data-filepond-lang="de_de"
    data-filepond-chunk-enabled="true"
    data-filepond-chunk-size="5242880"
    data-filepond-title-required="true"
    data-filepond-metainfo-lang="true"
>

Hinweis zu den neuen Attributen:

  • data-filepond-title-required="true": Macht das title Feld im Metadaten-Dialog zu einem Pflichtfeld
  • data-filepond-metainfo-lang="true": Aktiviert die automatische Erkennung mehrsprachiger MetaInfo-Felder

Hinweis zu data-filepond-types:

  • MIME-Types werden bevorzugt: image/*, video/*, application/pdf
  • Dateiendungen werden automatisch konvertiert: .pdf, .doc, .docx
  • Beide Formate können gemischt werden: image/*, .pdf, .doc

Ausgabe

<?php
$files = explode(',', 'REX_VALUE[1]');
foreach($files as $file) {
    if($media = rex_media::get($file)) {
        // Standard-Metadaten
        echo '<img
            src="'.$media->getUrl().'"
            alt="'.$media->getValue('med_alt').'"
            title="'.$media->getValue('title').'"
        >';
        
        // Mehrsprachige Metadaten (falls MetaInfo Lang Fields verwendet wird)
        if (class_exists('\FriendsOfRedaxo\MetaInfoLangFields\MetainfoLangHelper')) {
            $titles = \FriendsOfRedaxo\MetaInfoLangFields\MetainfoLangHelper::getFieldValues(
                $media, 
                'med_title_lang'
            );
            
            // Titel für aktuelle Sprache
            $currentTitle = $titles[rex_clang::getCurrentId()] ?? '';
            echo '<p>Titel: ' . rex_escape($currentTitle) . '</p>';
            
            // Beschreibung für aktuelle Sprache
            $descriptions = \FriendsOfRedaxo\MetaInfoLangFields\MetainfoLangHelper::getFieldValues(
                $media, 
                'med_description_lang'
            );
            $currentDescription = $descriptions[rex_clang::getCurrentId()] ?? '';
            echo '<p>Beschreibung: ' . rex_escape($currentDescription) . '</p>';
        }
    }
}
?>

Uploads zu E-Mails hinzufügen

Für die Übernahme der Uploads in E-Mails über YForm Formulare steht eine Action zur Verfügung, die in ein Formular eingebaut werden kann. In der Pipe Notation schreibt man:

action|filepond2email|label_filepond

In der PHP Notation schreibt man:

$yform->setActionField('filepond2email',['label_filepond']);

label_filepond ist zu ersetzen durch den Feldnamen, den das filepond Feld hat, also z.B. uploads

Chunk-Upload für große Dateien

Der Chunk-Upload ist das Herzstück des FilePond-Uploaders und ermöglicht das zuverlässige Hochladen großer Dateien auch bei langsameren Internetverbindungen.

Funktionsweise

  1. Datei-Aufteilung: Große Dateien werden clientseitig in kleine Teile (Chunks) aufgeteilt.
  2. Chunk-weiser Upload: Jeder Chunk wird einzeln hochgeladen, mit individueller Fortschrittsanzeige.
  3. Serverseitige Zusammenführung: Nach Abschluss des Uploads werden alle Chunks zu einer vollständigen Datei zusammengefügt.
  4. Automatische Bereinigung: Temporäre Dateien werden nach erfolgreichem Upload automatisch entfernt.

Vorteile

  • Verbesserte Zuverlässigkeit: Bei Netzwerkproblemen müssen nur fehlgeschlagene Chunks erneut hochgeladen werden.
  • Große Dateien: Überwindung von Server-Limits für maximale Upload-Größen.
  • Bessere Performance: Serverseitige Ressourcen werden effizienter genutzt.
  • Benutzerfreundlichkeit: Klare Fortschrittsanzeige für jeden Chunk und die Gesamtdatei.

Konfiguration

Im Backend können Sie folgende Chunk-Upload-Einstellungen anpassen:

  • Chunk-Upload aktivieren/deaktivieren: Globale Einstellung für alle Upload-Felder.
  • Chunk-Größe: Die Größe jedes Chunks in MB (Standard: 5MB).
  • Temporäre Dateien aufräumen: Manuelle Bereinigung alter temporärer Dateien.

Helper-Klasse

Das AddOn enthält eine Helper-Klasse, die das Einbinden von CSS- und JavaScript-Dateien vereinfacht.

// Im Template oder Modul
<?php
echo filepond_helper::getScripts();
echo filepond_helper::getStyles();
?>

Konfiguration

Data-Attribute

Folgende data-Attribute können zur Konfiguration verwendet werden:

Attribut Beschreibung Standardwert
data-filepond-cat Medienpool Kategorie ID 0
data-filepond-types Erlaubte Dateitypen (MIME-Types oder Dateiendungen, kommagetrennt) image/*
data-filepond-maxfiles Maximale Anzahl an Dateien 30
data-filepond-maxsize Maximale Dateigröße in MB 10
data-filepond-lang Sprache (de_de / en_gb) de_de
data-filepond-skip-meta Meta-Eingabe deaktivieren false
data-filepond-chunk-enabled Chunk-Upload aktivieren true
data-filepond-chunk-size Chunk-Größe in MB 5
data-filepond-delayed-upload Verzögerter Upload-Modus false
data-filepond-delayed-type Upload-Modus-Typ (1=Button, 2=Submit) 1 wenn delayed-upload aktiv
data-filepond-title-required Titel-Feld als Pflichtfeld false
data-filepond-title-lang-required Mehrsprachiger Titel als Pflichtfeld (deprecated) true
data-filepond-metainfo-lang MetaInfo Lang Fields Integration aktivieren false

Spezielle Attribute für Metadaten

data-filepond-title-required Steuert, ob das einfache title Feld (für interne Verwaltung) als Pflichtfeld behandelt wird:

<!-- Titel als Pflichtfeld -->
<input data-filepond-title-required="true" data-widget="filepond" ...>

<!-- Titel optional (Standard) -->
<input data-filepond-title-required="false" data-widget="filepond" ...>

data-filepond-metainfo-lang Aktiviert die automatische Erkennung und Integration von MetaInfo Lang Fields:

<!-- MetaInfo Lang Fields aktivieren -->
<input data-filepond-metainfo-lang="true" data-widget="filepond" ...>

Hinweis: Das Attribut data-filepond-title-lang-required ist deprecated. Mehrsprachige Titel (med_title_lang) sind automatisch Pflichtfelder und können nicht deaktiviert werden. Verwenden Sie stattdessen data-filepond-title-required für das einfache Titel-Feld.

Erlaubte Dateitypen (MIME-Types)

Grundlegende Syntax

Das Addon unterstützt sowohl MIME-Types als auch Dateiendungen. MIME-Types werden jedoch bevorzugt, da sie sicherer und eindeutiger sind.

Empfohlene Verwendung (MIME-Types):

data-filepond-types="mime/type"

Alternativ (Dateiendungen):

data-filepond-types=".extension"

Wichtig: Dateiendungen werden automatisch in MIME-Types konvertiert. Beide Formate können gemischt werden.

Standard MIME-Types

  • Bilder: image/* oder image/jpeg, image/png, image/gif, image/webp
  • Videos: video/* oder video/mp4, video/webm, video/quicktime
  • Audio: audio/* oder audio/mpeg, audio/wav, audio/ogg
  • PDFs: application/pdf
  • Microsoft Word: application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document
  • Microsoft Excel: application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
  • Microsoft PowerPoint: application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation

Beispiele

Nur Bilder (empfohlen):

data-filepond-types="image/*"

Bilder und PDFs (MIME-Types - empfohlen):

data-filepond-types="image/*, application/pdf"

Bilder und PDFs (gemischt - funktioniert auch):

data-filepond-types="image/*, .pdf"

Bilder, Videos und PDFs (MIME-Types - empfohlen):

data-filepond-types="image/*, video/*, application/pdf"

Bilder, Videos und PDFs (Dateiendungen - wird automatisch konvertiert):

data-filepond-types="image/*, video/*, .pdf"

Dokumente (MIME-Types - empfohlen):

data-filepond-types="application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, text/plain"

Dokumente (Dateiendungen - wird automatisch konvertiert):

data-filepond-types=".pdf, .doc, .docx, .txt"

Microsoft Office (MIME-Types - empfohlen):

data-filepond-types="application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation"

Medien und Dokumente gemischt (beide Formate):

data-filepond-types="image/*, video/*, application/pdf, .doc, .docx, .txt"

Unterstützte Dateiendungen

Das Addon konvertiert automatisch folgende Dateiendungen zu den entsprechenden MIME-Types:

  • Bilder: .jpg, .jpeg, .png, .gif, .webp, .avif, .svg, .bmp, .tiff, .tif, .ico
  • Videos: .mp4, .webm, .ogg, .ogv, .avi, .mov, .wmv, .flv, .mkv
  • Audio: .mp3, .wav, .ogg, .oga, .flac, .m4a, .aac
  • Dokumente: .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .odt, .ods, .odp
  • Text: .txt, .csv, .rtf, .html, .htm, .xml, .json
  • Archive: .zip, .rar, .7z, .tar, .gz, .bz2

Hinweis: MIME-Types sind die bevorzugte Methode, da sie eindeutiger sind und weniger Fehleranfälligkeit haben. Dateiendungen werden nur aus Kompatibilitätsgründen unterstützt und automatisch in MIME-Types konvertiert.

Session-Konfiguration für individuelle Anpassungen

Hinweis: Bei Verwendung von YForm/Yorm muss rex_login::startSession() vor Yform/YOrm aufgerufen werden.

Im Frontend sollte die Session gestartet werden:

rex_login::startSession();

Die Werte sollten zurückgesetzt werden, wenn sie nicht mehr benötigt werden.

API-Token übergeben

rex_set_session('filepond_token', rex_config::get('filepond_uploader', 'api_token'));

Dadurch wird der API-Token übergeben, um Datei-Uploads auch außerhalb von YCOM im Frontend zu ermöglichen.

Meta-Abfrage deaktivieren

rex_set_session('filepond_no_meta', true);

Dadurch lässt sich die Meta-Abfrage (Titel, Alt-Text, Copyright) deaktivieren (boolescher Wert: true / false).

Titel-Pflichtfeld konfigurieren

rex_set_session('filepond_title_required', true);

Dadurch wird das einfache title Feld als Pflichtfeld markiert (boolescher Wert: true / false).

MetaInfo Lang Fields aktivieren

rex_set_session('filepond_metainfo_lang', true);

Dadurch wird die automatische Erkennung mehrsprachiger MetaInfo-Felder aktiviert (boolescher Wert: true / false).

Modulbeispiel

<?php
rex_login::startSession();
// Session-Token für API-Zugriff setzen (für Frontend)
rex_set_session('filepond_token', rex_config::get('filepond_uploader', 'api_token'));

// Optional: Meta-Eingabe deaktivieren
rex_set_session('filepond_no_meta', true);

// Optional: Titel als Pflichtfeld
rex_set_session('filepond_title_required', true);

// Optional: MetaInfo Lang Fields aktivieren
rex_set_session('filepond_metainfo_lang', true);

// Filepond Assets einbinden (besser im Template ablegen)
if (rex::isFrontend()) {
    echo filepond_helper::getStyles();
    echo filepond_helper::getScripts();
}
?>

<form class="uploadform" method="post" enctype="multipart/form-data">
    <input
        type="hidden"
        name="REX_INPUT_MEDIALIST[1]"
        value="REX_MEDIALIST[1]"
        data-widget="filepond"
        data-filepond-cat="1"
        data-filepond-types="image/*,video/*,application/pdf"
        data-filepond-maxfiles="3"
        data-filepond-maxsize="10"
        data-filepond-lang="de_de"
        data-filepond-skip-meta="<?= rex_session('filepond_no_meta', 'boolean', false) ? 'true' : 'false' ?>"
        data-filepond-title-required="<?= rex_session('filepond_title_required', 'boolean', false) ? 'true' : 'false' ?>"
        data-filepond-metainfo-lang="<?= rex_session('filepond_metainfo_lang', 'boolean', false) ? 'true' : 'false' ?>"
        data-filepond-chunk-enabled="true"
        data-filepond-chunk-size="5242880"
    >
</form>

Initialisierung im Frontend und Tipps

document.addEventListener('DOMContentLoaded', function() {
  // Dieser Code wird ausgeführt, nachdem das HTML vollständig geladen wurde.
  initFilePond();
});

JQuery-Variante

Falls JQuery im Einsatz ist, rex:ready im Frontend triggern.

document.addEventListener('DOMContentLoaded', function() {
  // Dieser Code wird ausgeführt, nachdem das HTML vollständig geladen wurde.
  $('body').trigger('rex:ready', [$('body')]);
});

Stylefix für das Frontend

Falls das Panel nicht richtig dargestellt wird, kann es helfen, den Stil anzupassen:

.filepond--panel-root {
    border: 1px solid var(--fp-border);
    background-color: #eedede;
    min-height: 150px;
}

Anpassung der FilePond-Stile

Das AddOn enthält anpassbare Stile für verschiedene Bereiche der FilePond-Oberfläche. Diese können über CSS-Variablen und eigene CSS-Regeln individuell angepasst werden.

Upload-Button anpassen

Der Upload-Button im verzögerten Upload-Modus kann über CSS-Variablen vollständig angepasst werden:

:root {
    --filepond-upload-btn-color: #4285f4;         /* Hintergrundfarbe */
    --filepond-upload-btn-hover-color: #3367d6;   /* Hover-Farbe */
    --filepond-upload-btn-text-color: #fff;       /* Textfarbe */
    --filepond-upload-btn-border-radius: 4px;     /* Eckenradius */
    --filepond-upload-btn-padding: 10px 16px;     /* Innenabstand */
    --filepond-upload-btn-font-size: 14px;        /* Schriftgröße */
    --filepond-upload-btn-font-weight: 500;       /* Schriftstärke */
    --filepond-upload-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);           /* Schatten */
    --filepond-upload-btn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2);     /* Hover-Schatten */
}

Beispiele für verschiedene Button-Stile

Roter Warn-Button:

:root {
    --filepond-upload-btn-color: #dc3545;
    --filepond-upload-btn-hover-color: #c82333;
}

Grüner Success-Button:

:root {
    --filepond-upload-btn-color: #28a745;
    --filepond-upload-btn-hover-color: #218838;
}

Minimalistischer Button:

:root {
    --filepond-upload-btn-color: transparent;
    --filepond-upload-btn-hover-color: rgba(0, 0, 0, 0.05);
    --filepond-upload-btn-text-color: #007bff;
    --filepond-upload-btn-shadow: none;
    --filepond-upload-btn-shadow-hover: none;
}

.filepond-upload-btn {
    border: 2px solid currentColor !important;
}

Thumbnail-Rahmen anpassen

Die Rahmen bei Upload-Status (Erfolg/Fehler) können ebenfalls individuell angepasst werden:

/* Erfolgreicher Upload - grüner Rahmen */
[data-filepond-item-state='processing-complete'] {
    border: 3px solid #28a745 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3) !important;
    border-radius: 0.5em !important;
}

/* Fehler beim Upload - roter Rahmen */
[data-filepond-item-state*='error'],
[data-filepond-item-state*='invalid'] {
    border: 3px solid #dc3545 !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.3) !important;
    border-radius: 0.5em !important;
}

Glow-Animation deaktivieren

Falls die pulsierenden Glow-Effekte nicht gewünscht sind:

[data-filepond-item-state='processing-complete'],
[data-filepond-item-state*='error'],
[data-filepond-item-state*='invalid'] {
    animation: none !important;
}

Alternative Rahmen-Stile

Dickere Rahmen:

[data-filepond-item-state='processing-complete'] {
    border: 5px solid #28a745 !important;
}

[data-filepond-item-state*='error'],
[data-filepond-item-state*='invalid'] {
    border: 5px solid #dc3545 !important;
}

Gestrichelte Rahmen:

[data-filepond-item-state='processing-complete'] {
    border: 3px dashed #28a745 !important;
}

[data-filepond-item-state*='error'],
[data-filepond-item-state*='invalid'] {
    border: 3px dashed #dc3545 !important;
}

Abgerundete Ecken anpassen:

[data-filepond-item-state='processing-complete'],
[data-filepond-item-state*='error'],
[data-filepond-item-state*='invalid'] {
    border-radius: 15px !important; /* Stark abgerundete Ecken */
}

Theme-spezifische Anpassungen

Das AddOn unterstützt vordefinierte Themes:

Dark Theme:

.dark-theme .filepond-upload-btn {
    --filepond-upload-btn-color: #3d4852;
    --filepond-upload-btn-hover-color: #2d3748;
    --filepond-upload-btn-text-color: #f7fafc;
}

Minimal Theme:

.minimal-theme .filepond-upload-btn {
    --filepond-upload-btn-color: transparent;
    --filepond-upload-btn-hover-color: rgba(0, 0, 0, 0.05);
    --filepond-upload-btn-text-color: #2196F3;
    --filepond-upload-btn-shadow: none;
    --filepond-upload-btn-shadow-hover: none;
    border: 1px solid currentColor;
}

Eigene CSS-Datei einbinden

Die Anpassungen sollten in einer eigenen CSS-Datei gespeichert und nach den FilePond-Styles geladen werden:

<!-- Nach den FilePond-Styles -->
<link rel="stylesheet" href="path/to/filepond-custom-styles.css">
<link rel="stylesheet" href="path/to/meine-anpassungen.css">

Im REDAXO-Template:

<?php
// Standard FilePond-Styles laden
echo filepond_helper::getStyles();

// Eigene Anpassungen laden
rex_view::addCssFile($this->getAssetsUrl('css/meine-filepond-anpassungen.css'));
?>

Vollständige Stil-Überschreibung

Für umfassende Änderungen können die originalen Stile komplett überschrieben werden:

/* Komplett eigener Upload-Button */
.filepond-upload-btn {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4) !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 15px 30px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

.filepond-upload-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

Tipp: Verwende die Browser-Entwicklertools (F12), um die CSS-Selektoren zu identifizieren und deine Änderungen in Echtzeit zu testen, bevor du sie in deine CSS-Datei überträgst.

Bildoptimierung

Bilder werden automatisch optimiert, wenn sie eine konfigurierte maximale Pixelgröße überschreiten:

  • Große Bilder werden proportional verkleinert.
  • Die Qualität ist konfigurierbar (10-100).
  • GIF-Dateien werden nicht verändert.
  • Die Originaldatei wird durch die optimierte Version ersetzt.

Standardmäßig ist die maximale Größe 1200 Pixel (Breite oder Höhe). Dieser Wert und die Kompressionsqualität können in den Einstellungen angepasst werden.

EXIF-Orientierung korrigieren

Das AddOn kann automatisch die Bildausrichtung basierend auf EXIF-Daten korrigieren. Dies ist besonders nützlich für Fotos, die mit Smartphones aufgenommen wurden, da diese oft EXIF-Orientierungsinformationen enthalten, die anzeigen, wie das Bild gedreht werden sollte.

Funktionsweise:

  • Erkennt EXIF-Orientierungsinformationen in JPEG-Bildern
  • Dreht und spiegelt Bilder automatisch in die korrekte Ausrichtung
  • Verhindert, dass Hochformat-Bilder als Querformat erscheinen
  • Entfernt die EXIF-Orientierungsinformation nach der Korrektur

Aktivierung:

Die EXIF-Orientierungskorrektur ist standardmäßig deaktiviert und kann in den Einstellungen aktiviert werden:

  1. Navigiere zu REDAXO > AddOns > FilePond Uploader > Einstellungen
  2. Aktiviere die Option "EXIF-Orientierung automatisch korrigieren"
  3. Speichere die Einstellungen

Hinweise:

  • Die Funktion benötigt die PHP-EXIF-Erweiterung (normalerweise standardmäßig verfügbar)
  • Nur JPEG-Bilder werden verarbeitet, da andere Formate selten EXIF-Daten enthalten
  • Die Korrektur erfolgt vor allen anderen Bildoptimierungen

Mehrsprachigkeit und MetaInfo Lang Fields Integration

Das FilePond AddOn bietet umfassende Unterstützung für mehrsprachige Metadaten durch die Integration mit dem MetaInfo Lang Fields AddOn von Friends of REDAXO.

Voraussetzungen

Für die Verwendung mehrsprachiger Metafelder sind folgende AddOns erforderlich:

  1. MetaInfo AddOn (Standard REDAXO AddOn)
  2. MetaInfo Lang Fields AddOn von Friends of REDAXO

Hinweis: Das System funktioniert automatisch mit allen in REDAXO konfigurierten Sprachen (rex_clang).

Installation und Einrichtung

1. MetaInfo Lang Fields AddOn installieren

# Via Composer (empfohlen)
composer require friendsofredaxo/metainfo_lang_fields

# Oder über den REDAXO Installer

2. Mehrsprachige Metafelder anlegen

Erstelle in REDAXO > AddOns > MetaInfo > Medien neue Felder mit mehrsprachigen Feldtypen:

Beispiel: Mehrsprachiger Titel

  • Feldname: med_title_lang
  • Feldtyp: lang_text oder lang_text_all
  • Bezeichnung: Titel (mehrsprachig)

Beispiel: Mehrsprachige Beschreibung

  • Feldname: med_description_lang
  • Feldtyp: lang_textarea oder lang_textarea_all
  • Bezeichnung: Beschreibung (mehrsprachig)

3. Automatische Erkennung

Das FilePond AddOn erkennt automatisch:

  • Alle verfügbaren MetaInfo-Felder
  • Welche Felder mehrsprachig konfiguriert sind
  • Alle konfigurierten Sprachen in REDAXO

Verfügbare mehrsprachige Feldtypen

Feldtyp Beschreibung Verwendung
lang_text Einzeiliges Textfeld für die aktuelle Sprache Titel, Keywords
lang_text_all Einzeiliges Textfeld für alle Sprachen Titel, Alt-Texte
lang_textarea Mehrzeiliges Textfeld für die aktuelle Sprache Beschreibungen
lang_textarea_all Mehrzeiliges Textfeld für alle Sprachen Beschreibungen

Empfohlene Metafelder

Standard-Felder (einsprachig)

Diese Felder bleiben einsprachig und werden automatisch erkannt:

  • title - Titel für interne Verwaltung
  • med_alt - Alt-Text für Barrierefreiheit
  • med_copyright - Copyright-Informationen

Mehrsprachige Felder

Erstelle diese Felder als mehrsprachige Varianten:

Mehrsprachiger Titel (med_title_lang):

Feldname: med_title_lang
Feldtyp: lang_text_all
Bezeichnung: Titel (mehrsprachig)
Priorität: 1

Mehrsprachige Beschreibung (med_description_lang):

Feldname: med_description_lang  
Feldtyp: lang_textarea_all
Bezeichnung: Beschreibung (mehrsprachig)
Priorität: 4

Mehrsprachige Keywords (med_keywords_lang):

Feldname: med_keywords_lang
Feldtyp: lang_text_all
Bezeichnung: Schlüsselwörter (mehrsprachig)
Priorität: 5

Benutzeroberfläche

Upload-Dialog

Bei mehrsprachigen Feldern wird eine benutzerfreundliche Oberfläche angezeigt:

  1. Hauptsprache sichtbar: Die erste/Standard-Sprache wird immer angezeigt
  2. Weitere Sprachen über Globus-Icon: Klick auf das Globus-Symbol öffnet weitere Sprachen
  3. Sprachspezifische Validierung: Verschiedene Validierungsregeln pro Sprache
  4. Alt-Text mit Dekorativ-Option: Checkbox für dekorative Bilder pro Sprache

Feld-Hierarchie im Dialog

Die Felder werden in folgender Reihenfolge angezeigt:

  1. title (einfacher Titel für interne Verwaltung)
  2. med_title_lang (mehrsprachiger Titel) - Pflichtfeld
  3. med_alt (Alt-Text für Bilder) - Pflichtfeld bei Bildern
  4. med_copyright (Copyright-Information)
  5. med_description oder med_description_lang (Beschreibung)
  6. Weitere Felder alphabetisch sortiert

Validierung und Pflichtfelder

Automatische Validierung

  • med_title_lang: Immer Pflichtfeld bei mehrsprachigen Titeln
  • med_alt: Pflichtfeld bei Bildern (kann per "dekorativ" deaktiviert werden)
  • title: Optional (kann in Settings/YForm als Pflichtfeld konfiguriert werden)

Dekorative Bilder

Für Alt-Texte gibt es eine "Dekoratives Bild" Checkbox:

  • Deaktiviert die Alt-Text-Pflicht für das jeweilige Sprachfeld
  • Funktioniert sprachspezifisch
  • Orientiert sich an Accessibility-Standards

Konfiguration

In YForm-Feldern

Mehrsprachige Metafelder werden automatisch erkannt und angezeigt. Keine zusätzliche Konfiguration erforderlich.

Titel-Feld als Pflichtfeld

Das einfache title Feld kann optional als Pflichtfeld konfiguriert werden:

Global (Upload-Seite): In den AddOn-Einstellungen unter "Titel-Feld auf Upload-Seite als Pflichtfeld"

Pro YForm-Feld:

$yform->setValueField('filepond', [
    'name' => 'upload',
    'label' => 'Dateien',
    'title_required' => 1  // Titel als Pflichtfeld
]);

In Modulen/Templates:

<input 
    data-widget="filepond" 
    data-filepond-title-required="true"
    ...
>

Datenformat und Speicherung

Mehrsprachige Daten

Mehrsprachige Felder werden im MetaInfo Lang Fields Format gespeichert:

[
    {"clang_id": 1, "value": "Deutscher Titel"},
    {"clang_id": 2, "value": "English Title"}
]

Abrufen mehrsprachiger Daten

In Templates/Modulen:

<?php
$media = rex_media::get('dateiname.jpg');

// MetaInfo Lang Fields Helper verwenden
if (class_exists('\FriendsOfRedaxo\MetaInfoLangFields\MetainfoLangHelper')) {
    $titles = \FriendsOfRedaxo\MetaInfoLangFields\MetainfoLangHelper::getFieldValues(
        $media, 
        'med_title_lang'
    );
    
    // Titel für aktuelle Sprache
    $currentTitle = $titles[rex_clang::getCurrentId()] ?? '';
    
    // Titel für spezifische Sprache (z.B. Deutsch)
    $germanTitle = $titles[1] ?? '';
}

// Traditionelles Abrufen über getValue
$titleData = $media->getValue('med_title_lang');
// $titleData enthält JSON-String mit allen Sprachen
?>

In YForm/YOrm:

// Bei YOrm-Models werden mehrsprachige Felder automatisch aufgelöst
$dataset = \rex_yform_manager_dataset::get(1, 'my_table');
$files = explode(',', $dataset->getValue('upload_field'));

foreach ($files as $filename) {
    if ($media = rex_media::get($filename)) {
        $titleData = $media->getValue('med_title_lang');
        
        if ($titleData) {
            $titles = json_decode($titleData, true);
            foreach ($titles as $langData) {
                echo "Sprache {$langData['clang_id']}: {$langData['value']}<br>";
            }
        }
    }
}

API und JavaScript

Automatische Felderkennung

Das AddOn stellt eine API bereit, die automatisch alle verfügbaren Metafelder erkennt:

// API-Aufruf für Felderkennung
fetch('/redaxo/index.php?rex-api-call=filepond_auto_metainfo&action=get_fields')
  .then(response => response.json())
  .then(data => {
      data.fields.forEach(field => {
          console.log(`Feld: ${field.name}, Mehrsprachig: ${field.multilingual}`);
          if (field.multilingual) {
              console.log('Verfügbare Sprachen:', field.languages);
          }
      });
  });

Erweiterte Metadaten speichern

// Mehrsprachige Metadaten speichern
const metadata = {
    'title': 'Einfacher Titel',
    'med_title_lang': {
        'de': 'Deutscher Titel',
        'en': 'English Title'
    },
    'med_description_lang': {
        'de': 'Deutsche Beschreibung',
        'en': 'English Description'  
    }
};

fetch('/redaxo/index.php?rex-api-call=filepond_auto_metainfo&action=save_metadata', {
    method: 'POST',
    body: new FormData()
});

Troubleshooting

Felder werden nicht erkannt

  1. Prüfe ob MetaInfo Lang Fields AddOn installiert und aktiviert ist
  2. Stelle sicher, dass die Felder mit lang_* Feldtypen angelegt sind
  3. Cache leeren: REDAXO > System > Cache löschen

Mehrsprachige Eingabe funktioniert nicht

  1. Prüfe die Browser-Konsole auf JavaScript-Fehler
  2. Stelle sicher, dass mehrere Sprachen in REDAXO konfiguriert sind
  3. Prüfe die AJAX-Antworten der MetaInfo-API

Daten werden nicht gespeichert

  1. Prüfe die Berechtigung für Medienpool-Zugriff
  2. Kontrolliere die API-Token-Konfiguration
  3. Prüfe die PHP-Error-Logs

Compatibility

Das AddOn ist kompatibel mit:

  • MetaInfo Lang Fields v1.0+ von Friends of REDAXO
  • REDAXO 5.15+ mit konfigurierten Sprachen
  • Alle gängigen FilePond-Konfigurationen

Die Mehrsprachigkeit ist vollständig rückwärtskompatibel - bestehende einsprachige Installationen funktionieren weiterhin ohne Änderungen.

Metadaten

Folgende Metadaten können für jede hochgeladene Datei erfasst werden:

Standard-Metadaten (einsprachig):

  1. Titel: Wird im Medienpool zur Verwaltung der Datei verwendet (gespeichert in title).
  2. Alt-Text: Beschreibt den Bildinhalt für Screenreader (wichtig für Barrierefreiheit und SEO), gespeichert in med_alt.
  3. Copyright: Information zu Bildrechten und Urhebern, gespeichert in med_copyright.
  4. Beschreibung: Ausführlichere Beschreibung des Medieninhalts, gespeichert in med_description.

Mehrsprachige Metadaten (mit MetaInfo Lang Fields):

  1. Mehrsprachiger Titel: Titel in allen konfigurierten Sprachen, gespeichert in med_title_lang (Pflichtfeld).
  2. Mehrsprachige Beschreibung: Beschreibung in allen Sprachen, gespeichert in med_description_lang.
  3. Mehrsprachige Keywords: Schlüsselwörter pro Sprache, gespeichert in med_keywords_lang.

Konfigurierbare Pflichtfelder:

  • title (einfacher Titel): Optional als Pflichtfeld konfigurierbar über Settings oder data-Attribut
  • med_title_lang (mehrsprachiger Titel): Immer Pflichtfeld, nicht deaktivierbar
  • med_alt (Alt-Text): Pflichtfeld bei Bildern, kann pro Sprache als "dekorativ" markiert werden

Hinweis: Die Felder werden automatisch in der Datenbank angelegt, falls sie noch nicht existieren. Bei mehrsprachigen Feldern muss das MetaInfo Lang Fields AddOn installiert sein.

Events und JavaScript-API

Wichtige JavaScript-Events für eigene Entwicklungen:

// Upload erfolgreich
pond.on('processfile', (error, file) => {
    if(!error) {
        console.log('Datei hochgeladen:', file.serverId);
    }
});

// Datei gelöscht
pond.on('removefile', (error, file) => {
    console.log('Datei entfernt:', file.serverId);
});

// Chunk-Upload-Fortschritt (nur wenn Chunk-Upload aktiviert ist)
pond.on('processfileProgress', (file, progress) => {
    console.log(`Chunk-Fortschritt für ${file.filename}: ${Math.floor(progress * 100)}%`);
});

Wartung

Als Administrator können Sie temporäre Dateien und Chunks über die Einstellungsseite bereinigen. Dies ist besonders nützlich, wenn:

  • Uploads abgebrochen wurden
  • Temporäre Dateien nicht automatisch gelöscht wurden
  • Sie Speicherplatz freigeben möchten

Die Wartungsfunktion löscht:

  • Alte Chunk-Verzeichnisse (älter als 24 Stunden)
  • Temporäre Metadaten-Dateien
  • Nicht mehr benötigte temporäre Dateien

Hinweise

  • Die maximale Dateigröße wird serverseitig überprüft.
  • Das Copyright-Feld und die Beschreibung sind optional, Titel und Alt-Text sind Pflicht.
  • Uploads landen automatisch im Medienpool.
  • Metadaten werden im Medienpool gespeichert.
  • Videos können direkt im Upload-Dialog betrachtet werden.
  • Bilder werden automatisch auf die maximale Größe optimiert.
  • Chunk-Upload funktioniert auch bei langsameren Internetverbindungen zuverlässig.

Verzögerter Upload-Modus

Der verzögerte Upload-Modus trennt den Prozess der Dateiauswahl vom eigentlichen Upload-Vorgang. Dateien werden erst hochgeladen, wenn der Benutzer auf den "Dateien hochladen"-Button klickt.

Vorteile

  • Bessere Kontrolle: Vorschau und Sichtung vor dem Upload
  • Datei-Management: Löschen unerwünschter Dateien vor dem Upload
  • Neuordnung: Sortieren der Dateien vor dem Upload
  • Effizientes Arbeiten: Besonders nützlich für große Dateimengen

Aktivierung im Backend

Der verzögerte Upload-Modus kann global in den FilePond-Einstellungen aktiviert werden:

  1. Navigiere zu REDAXO > AddOns > FilePond Uploader > Einstellungen
  2. Aktiviere die Option "Verzögerter Upload-Modus"
  3. Speichere die Einstellungen

Aktivierung in YForm-Feldern

Für YForm-Felder kann der verzögerte Upload-Modus individuell aktiviert werden:

$yform->setValueField('filepond', [
    'name' => 'bilder',
    'label' => 'Bildergalerie',
    'allowed_max_files' => 5,
    'allowed_types' => 'image/*',
    'delayed_upload' => 1  // Verzögerter Upload aktivieren
]);

Aktivierung via HTML-Attribut

Bei direkter Einbindung kann der verzögerte Upload-Modus über ein Attribut aktiviert werden:

<input
    type="hidden"
    name="REX_INPUT_VALUE[1]"
    value="REX_VALUE[1]"
    data-widget="filepond"
    data-filepond-cat="1"
    data-filepond-delayed-upload="true"
>

Hinweis: Das Attribut data-filepond-delayed-type steuert den Upload-Modus:

  • 1: Upload-Button wird angezeigt (Standard wenn data-filepond-delayed-upload="true")
  • 2: Upload erfolgt beim Formular-Submit (muss explizit gesetzt werden)

Das Attribut data-filepond-delayed-type muss nur gesetzt werden, wenn der Submit-Modus (2) gewünscht ist. Beim Aktivieren von data-filepond-delayed-upload="true" wird automatisch der Upload-Button-Modus (1) verwendet.

Anpassung des Upload-Buttons

Der Upload-Button wird automatisch unter dem FilePond-Element angezeigt, wenn der verzögerte Upload-Modus aktiviert ist. Die Optik kann über CSS-Variablen angepasst werden:

:root {
    --filepond-upload-btn-color: #4285f4;         /* Hintergrundfarbe */
    --filepond-upload-btn-hover-color: #3367d6;   /* Hover-Farbe */
    --filepond-upload-btn-text-color: #fff;       /* Textfarbe */
    --filepond-upload-btn-border-radius: 4px;     /* Eckenradius */
    --filepond-upload-btn-padding: 10px 16px;     /* Innenabstand */
    --filepond-upload-btn-font-size: 14px;        /* Schriftgröße */
    --filepond-upload-btn-font-weight: 500;       /* Schriftstärke */
}

Hinweis: Bei aktiviertem verzögerten Upload-Modus können Benutzer die Dateien vor dem Upload neu anordnen, löschen und in Ruhe auswählen. Die tatsächliche Upload-Verarbeitung beginnt erst nach dem Klick auf den Button.

Credits

We believe in giving back to the community. You'll find various open source projects in our repositories that we've developed and maintain. We're also proud contributors to the REDAXO CMS ecosystem, actively participating in its development and community.

Support

  • GitHub Issues: Für Fehlermeldungen und Feature-Anfragen.
  • REDAXO Slack: Für Community-Support und Diskussionen.
  • www.redaxo.org: Offizielle REDAXO-Website.
  • AddOn Homepage: Für aktuelle Informationen und Updates.

About

KLXM Redaxo-AddOn: Filepond for REDAXO

Resources

Readme

License

MIT license

Security policy

Security policy
Activity
Custom properties

Stars

9 stars

Watchers

1 watching

Forks

3 forks
Report repository

Releases 37

Moin Info Center ℹ️ Latest
Nov 18, 2025
+ 36 releases

Packages

No packages published

Contributors 5

Languages