filepond Uploader für REDAXO

Ein moderner Datei-Uploader für REDAXO, der auf dem FilePond Framework basiert.

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

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.
Barrierefreiheit:
- Erzwingt das Setzen von Alt-Texten für Bilder.
- Legt automatisch ein Metafeld an, falls es noch nicht existiert.
Rechtliche Sicherheit:
- Optionale Abfrage des Copyrights für Bilder.
Mehrsprachigkeit:
- Verfügbar in Deutsch (DE) und Englisch (EN).
Nahtlose Integration:
- Direkte Speicherung von Dateien im REDAXO-Medienpool.
- YForm-Value-Feld mit automatischer Löschung nicht verwendeter Medien.
- Asynchrone Uploads für eine flüssige Benutzererfahrung.
Validierung und Sicherheit:
- Überprüfung von Dateitypen und -größen.
- Sichere API-Token-basierte Authentifizierung (auch mit YCOM).
Automatische Bildoptimierung:
- Verkleinerung großer Bilder (außer GIFs) zur Optimierung der Webseitenperformance.

Installation

AddOn installieren: Gehe im REDAXO-Installer zum AddOn-Bereich und installiere das AddOn "filepond_uploader".
AddOn aktivieren: Aktiviere das AddOn im Backend unter "AddOns".
Fertig: Der Uploader ist nun einsatzbereit!

Schnellstart

Verwendung als YForm-Feldtyp

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

PIPE-Variante Ja, es geht sogar Pipe! Und zwar so:

filepond|pic|Profilbild|1|image/*|3|1|de_de

Kopiert Bilder in den Medienpool in die Kategorie 1, erlaubt nur Bilder mit max. 3 MB Größe und erlaubt max. ein Bild. Sprache ist de_de.

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 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"
>

Ausgabe

<?php
$files = explode(',', 'REX_VALUE[1]');
foreach($files as $file) {
    if($media = rex_media::get($file)) {
        echo '<img
            src="'.$media->getUrl().'"
            alt="'.$media->getValue('med_alt').'"
            title="'.$media->getValue('title').'"
        >';
    }
}
?>

Integration mit Medialisten

<input
    type="hidden"
    name="REX_INPUT_MEDIALIST[1]"
    value="REX_MEDIALIST[1]"
    data-widget="filepond"
    ...
>

Helper-Klasse

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

Basisverwendung

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

Methoden

`getScripts()`

Gibt alle benötigten JavaScript-Dateien zurück:

/**
 * Gibt die JavaScript-Dateien zurück
 * @return string HTML-String im Frontend, leerer String im Backend (nach dem Hinzufügen der Scripte via rex_view)
 */
public static function getScripts(): string

Enthaltene Dateien:

Validierungs-Plugins (Dateityp und -größe)
Image Preview Plugin
FilePond Core
Modal- und Widget-Skripte

`getStyles()`

Gibt alle benötigten CSS-Dateien zurück:

/**
 * Gibt die CSS-Dateien zurück
 * @return string HTML-String im Frontend, leerer String im Backend (nach dem Hinzufügen der Stile via rex_view)
 */
public static function getStyles(): string

Enthaltene Dateien:

FilePond Core CSS
Image Preview Plugin CSS
Widget-Stile

Verwendung im Frontend

// In einem Template
<!DOCTYPE html>
<html>
<head>
    <?= filepond_helper::getStyles() ?>
</head>
<body>
    <!-- Content -->
    <?= filepond_helper::getScripts() ?>
</body>
</html>

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	`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`

Erlaubte Dateitypen (MIME-Types)

Grundlegende Syntax

data-filepond-types="mime/type"

Bilder: image/*
Videos: video/*
PDFs: application/pdf
Medienformate (Bilder, Videos, Audio): image/*, video/*, audio/*

Beispiele:

<!-- Alle Bildtypen -->
data-filepond-types="image/*"

<!-- Bilder und PDFs -->
data-filepond-types="image/*, application/pdf"

<!-- Microsoft Office -->
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"

<!-- OpenOffice/LibreOffice -->
data-filepond-types="application/vnd.oasis.opendocument.text, application/vnd.oasis.opendocument.spreadsheet, application/vnd.oasis.opendocument.presentation"

<!-- Office und PDF kombiniert -->
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, application/vnd.oasis.opendocument.text, application/vnd.oasis.opendocument.spreadsheet, application/vnd.oasis.opendocument.presentation, application/pdf"

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).

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);

// 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' ?>"
    >
</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;
}

Bildoptimierung

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

Große Bilder werden proportional verkleinert.
Die Qualität bleibt erhalten.
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 kann in den Einstellungen oder via dem data-filepond-maxpixels Attribut angepasst werden.

Metadaten

Folgende Metadaten müssen für jede hochgeladene Datei erfasst werden:

Titel: Wird im Medienpool zur Verwaltung der Datei verwendet.
Alt-Text: Beschreibt den Bildinhalt für Screenreader (wichtig für Barrierefreiheit und SEO), gespeichert in med_alt.
Copyright: Information zu Bildrechten und Urhebern, gespeichert in med_copyright (optional).

Events

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);
});

Assets aktualisieren

npm install
npm run build

Hinweise

Die maximale Dateigröße wird auch serverseitig überprüft.
Das Copyright-Feld ist optional, Titel und Alt-Text sind Pflicht.
ALT-Text ist verpflichtend
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.

Credits

KLXM Crossmedia GmbH: klxm.de
Entwickler: Thomas Skerbis
Vendor: FilePond - pqina.nl/filepond
Lizenz: MIT

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.

Name		Name	Last commit message	Last commit date
Latest commit History 236 Commits
.github/workflows		.github/workflows
assets		assets
lang		lang
lib		lib
pages		pages
ytemplates/bootstrap		ytemplates/bootstrap
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
boot.php		boot.php
install.php		install.php
package-lock.json		package-lock.json
package.json		package.json
package.yml		package.yml

License

KLXM/filepond_uploader

Folders and files

Latest commit

History

Repository files navigation