Produkt — FluxFiles

Funktionen

Alles, was ein moderner Dateimanager braucht

Gebaut für Entwickler, die Flexibilität brauchen.

Multi-Speicher

Lokal, AWS S3, Cloudflare R2, SFTP über Flysystem v3 — per Konfiguration wechseln, kein Code-Change.

Überall einbetten

iframe + postMessage SDK. Standalone-UI mit Alpine.js (ohne Build). Funktioniert mit jedem Framework.

JWT-Auth + Scoping

Pfad-Präfix pro Nutzer, Berechtigungen, Disk-Whitelist, Owner-only-Modus — oder starten Sie mit einem viewer/editor/admin-Rollenpreset.

ACL-Rollenpresets

Tokens aus viewer-/editor-/admin-/superadmin-Presets ausstellen — ein Parameter setzt die passenden Berechtigungs-, Disk- und Scope-Claims, statt sie manuell zusammenzustellen.

AI Auto-Tag

Claude / OpenAI Vision — automatisch Alt-Text, Titel, Tags.

Bildzuschnitt

Inline-Zuschnitt mit Seitenverhältnis-Vorlagen.

Bildoptimierung

Automatische WebP-Varianten — Thumb, Mittel, Groß.

Vorsignierte Uploads

Browser lädt direkt zu S3/R2 hoch — null Bandbreite auf Ihrem Server.

Chunk-Upload

S3 Multipart für Dateien > 10MB.

Volltextsuche

Indizierte Suche über Namen, Titel, Tags — standardmäßig dateibasiert, optional mit eigener SQL-Datenbank als Backend.

DB-gestützte Metadaten

Opt-in-Modus FLUXFILES_STORAGE_BACKEND=db — Metadaten, Such-/Ordnerindex und Audit-Log liegen in Ihrer eigenen MySQL-/PostgreSQL-/SQLite-Datenbank statt in JSON-Sidecars. Die Dateibytes bleiben in beiden Fällen im Storage.

Massenoperationen

Mehrfachauswahl: Verschieben, Kopieren, Löschen, Herunterladen.

Cross-Disk-Transfer

Kopieren/Verschieben zwischen Lokal ↔ S3 ↔ R2.

Papierkorb

Wiederherstellbares Löschen mit automatischer Bereinigung.

SEO-Metadaten

Titel, Alt, Beschriftung, Tags — S3-Objektmetadaten (Cloud) oder Sidecar-JSON (lokal). Volltextsuche.

Dunkelmodus

Hell / dunkel / auto in UI und SDK.

16 Sprachen

Standard Englisch. Locale über SDK, URL (?locale=) oder FLUXFILES_LOCALE. RTL für Arabisch.

Audit-Protokoll

Alle Schreibaktionen werden protokolliert.

Ratenbegrenzung

Token Bucket pro Benutzer zum API-Schutz.

Speicherkontingent

Benutzerlimits über JWT-Claims.

BYOB-Buckets

Nutzer bringen eigenes S3/R2 — Zugangsdaten verschlüsselt im JWT (AES-256-GCM).

Duplikaterkennung

SHA-256-Match überspringt redundante Uploads außer bei erzwungenem Überschreiben.

SDK-Token-Refresh

onTokenRefresh bei 401 — zusammengefasster Refresh, Retry und updateToken() für proaktive Rotation.

Bucket Doctor

Diagnostiziert jedes S3/R2-Laufwerk — Zugangsdaten, Lesen/Schreiben/Löschen, Presign, CORS, Multipart — mit einfügefertigen IAM- und CORS-Fixes. BYOB-Buckets in Minuten einrichten.

SFTP-Laufwerk

Ein 3. Treiber nach S3/R2 — jeder VPS oder Webspace wird zum Dateimanager.

Code-/Config-Editor

Text- und Konfigdateien (wp-config.php, .env) im Browser bearbeiten, à la cPanel.

Zip & Entpacken

Auswahl als Zip laden oder Archiv entpacken — gegen Zip-Slip & -Bombe geschützt.

Wasserzeichen

Text- oder Logo-Wasserzeichen on-the-fly zum Vorschauschutz — Quelle bleibt unberührt.

On-Demand WebP + AVIF

Jede Bildgröße als gecachtes AVIF/WebP über eine URL ausliefern (Accept-verhandelt), mit fertigem responsivem srcset.

SFTP-Rechte

Unix-Dateirechte (chmod) auf SFTP-Laufwerken per cPanel-artigem Dialog ändern.

SSH-Terminal

Binden Sie Ihr eigenes ttyd / gotty / wetty über den kostenlosen Claim terminal_pty_url als In-App-Terminal auf SFTP-Datenträgern ein — FluxFiles liefert keine eigene Shell mit.

Ein-Klick-Git-Deploy

Pull und Reset eines Git-Repos auf Ihrem SFTP-Server direkt aus dem Dateimanager — feste Form, keine beliebige Shell, Hooks standardmäßig deaktiviert.

Nutzungs-Dashboard

Speicher auf einen Blick — Kontingent plus Aufschlüsselung nach Typ und Ordner.

Medienvorschau

Inline-Vorschau für Bild, Video, Audio & PDF; private lokale Medien sicher gestreamt.

Schnellinstallation

In 2 Minuten einsatzbereit

composer require fluxfiles/fluxfiles
cp vendor/fluxfiles/fluxfiles/.env.example vendor/fluxfiles/fluxfiles/.env
# vendor/fluxfiles/fluxfiles/.env  (read only from inside the package)
# Real environment variables win over this file and are preferred in production
# (Composer may remove a vendor .env on update).
FLUXFILES_SECRET=<output of: openssl rand -hex 32>
FLUXFILES_ALLOWED_ORIGINS=https://yourapp.com
<?php
require_once 'vendor/autoload.php';
// embed.php is not autoloaded — require it for fluxfiles_token()
require_once 'vendor/fluxfiles/fluxfiles/embed.php';

$token = fluxfiles_token([
    'user'   => 'user-123',
    'perms'  => ['read', 'write', 'delete'],
    'disks'  => ['local'],     // s3 / r2 need their own credentials in .env
    'prefix' => 'user-123/',
    'ttl'    => 3600,
]);
php vendor/bin/fluxfiles serve --port=8080
# then open http://127.0.0.1:8080/public/
composer require fluxfiles/laravel
php artisan vendor:publish --tag=fluxfiles-config
php artisan storage:link
# .env — proxy mode is the default: the API runs through your Laravel routes,
# no separate FluxFiles server is needed.
FLUXFILES_SECRET=<output of: openssl rand -hex 32>

# Only for FLUXFILES_MODE=standalone (FluxFiles on its own server):
# FLUXFILES_MODE=standalone
# FLUXFILES_ENDPOINT=https://fm.yourdomain.com
<?php
// app/FluxFiles/TenantClaims.php — REQUIRED: without a claims resolver
// <x-fluxfiles> renders "not available".
namespace App\FluxFiles;

use FluxFiles\Laravel\ClaimsResolver;
use Illuminate\Contracts\Auth\Authenticatable;

class TenantClaims implements ClaimsResolver
{
    public function resolve(Authenticatable $user): array
    {
        return [
            'prefix' => 'users/' . $user->getAuthIdentifier(),
        ];
    }
}
// config/fluxfiles.php
'claims_resolver' => \App\FluxFiles\TenantClaims::class,
// Laravel 11 / 12 — bootstrap/app.php: exclude the proxy routes from CSRF (else 419)
->withMiddleware(function (Middleware $middleware) {
    $middleware->validateCsrfTokens(except: ['api/fm/*']);
})

// Laravel 10 — app/Http/Middleware/VerifyCsrfToken.php
// protected $except = ['api/fm/*'];
<x-fluxfiles disk="local" mode="picker" height="600px" />
# Not yet on WordPress.org — install the release zip:
# 1. Download fluxfiles-<version>.zip from https://github.com/thai-pc/fluxfiles/releases
# 2. Plugins -> Add New -> Upload Plugin -> Activate
# 3. Settings -> FluxFiles: set the JWT secret (>= 32 bytes) and storage
# 4. Add the shortcode (or the FluxFiles block) to any page or post:
[fluxfiles]
npm install @fluxfiles/node   # Node >= 16
// Express / Next.js route — mint a token from your JS backend (no PHP)
import { createToken } from '@fluxfiles/node';

app.get('/fluxfiles-token', (req, res) => {
    const token = createToken({
        secret: process.env.FLUXFILES_SECRET, // >= 32 bytes
        userId: req.user.id,
        perms: ['read', 'write', 'delete'],
        prefix: `users/${req.user.id}`,
        ttl: 3600,
    });
    res.json({ token });
});
pip install fluxfiles-token
# FastAPI / Django / Flask route — mint a token from your Python backend (no PHP)
import os

from fastapi import Depends
from fluxfiles_token import create_token

@app.get("/fluxfiles-token")
def fluxfiles_token(user=Depends(current_user)):
    token = create_token(
        secret=os.environ["FLUXFILES_SECRET"],  # >= 32 bytes
        user_id=user.id,
        perms=["read", "write", "delete"],
        prefix=f"users/{user.id}",
        ttl=3600,
    )
    return {"token": token}
{
  "mcpServers": {
    "fluxfiles": {
      "command": "npx",
      "args": ["-y", "@fluxfiles/mcp"],
      "env": {
        "FLUXFILES_URL": "<your FluxFiles URL>",
        "FLUXFILES_TOKEN": "<scoped JWT>"
      }
    }
  }
}
# Claude Code (Node >= 18)
claude mcp add fluxfiles -e FLUXFILES_URL=<your FluxFiles URL> -e FLUXFILES_TOKEN=<scoped JWT> -- npx -y @fluxfiles/mcp
# Read-only by default. Opt in to writes:
FLUXFILES_MCP_WRITE=1
# and to move_to_trash:
FLUXFILES_MCP_DELETE=1

Der Agent kann nur anfassen, was sein JWT erlaubt — seine Disks, sein Pfadpräfix und seine Berechtigungen. Geben Sie ihm ein eng gefasstes Nur-Lese-Token.

npm install fluxfiles
<!-- or load a pinned CDN build (never @latest) -->
<script src="https://unpkg.com/fluxfiles@1.0.1/fluxfiles.js"></script>
<div id="file-picker" style="height:600px"></div>

<script>
FluxFiles.open({
    endpoint: 'https://your-fluxfiles-host',
    token: 'eyJhbGci...',   // JWT minted by your backend
    disk: 'local',
    mode: 'picker',
    container: '#file-picker',
    onSelect: function(file) {
        console.log('Selected:', file.url);
    },
    async onTokenRefresh() {
        const r = await fetch('/api/auth/refresh-fluxfiles-token');
        const { token } = await r.json();
        return token;
    }
});
</script>
npm install @fluxfiles/react
import { FluxFilesModal } from '@fluxfiles/react';

<FluxFilesModal
    open={open}
    endpoint="https://your-api.com"
    token={token}
    onSelect={(file) => console.log(file)}
    onClose={() => setOpen(false)}
/>
npm install @fluxfiles/vue
<script setup>
import { FluxFilesModal } from '@fluxfiles/vue';
</script>

<FluxFilesModal
    v-model:open="open"
    endpoint="https://your-api.com"
    :token="token"
    @select="onSelect"
    @close="open = false"
/>
docker run -p 8080:80 \
  -e FLUXFILES_SECRET="$(openssl rand -hex 32)" \
  -e FLUXFILES_ALLOWED_ORIGINS=https://yourapp.com \
  -v fluxfiles-data:/app/packages/core/storage \
  ghcr.io/thai-pc/fluxfiles:1.1
# UI: http://localhost:8080/public/
git clone https://github.com/thai-pc/fluxfiles.git
cd fluxfiles/packages/core
composer install
cp .env.example .env
# packages/core/.env — the placeholder secret is rejected, set a real one
FLUXFILES_SECRET=<output of: openssl rand -hex 32>
FLUXFILES_ALLOWED_ORIGINS=http://localhost:8080
# print dev tokens (run from the repo root)
php packages/core/tests/generate-token.php
php -S localhost:8080 router.php

# UI: http://localhost:8080/public/index.html?token=<token>
# ?token= is dev-only — it is stripped from the URL on boot.
# Real apps pass the JWT via the SDK / postMessage, never in a URL.

Für den Produktivbetrieb: Setzen Sie ein FLUXFILES_SECRET mit mindestens 32 Bytes und FLUXFILES_ALLOWED_ORIGINS (oder FLUXFILES_FRAME_ANCESTORS). Machen Sie das Paket-Stammverzeichnis zum Document Root und sperren Sie /_fluxfiles/ und .env in nginx. Legen Sie das Haupt-JWT niemals in eine URL — die Adapter übergeben es per postMessage. DEPLOYMENT.md

Kompatibel mit

Laravel WordPress React / Next.js Vue / Nuxt CKEditor 4 CKEditor 5 TinyMCE Summernote Any framework

Integrationen

Sofort einsatzbereite Adapter für Ihren Stack

Offizielle Adapter binden FluxFiles nativ in die Frameworks und Editoren ein, die Sie bereits nutzen.

Nutzen Sie CKEditor oder TinyMCE mit Ihrem eigenen Speicher, ganz ohne CKBox- oder Tiny-Drive-Abonnement. FluxFiles ergänzt eine Werkzeugleisten-Schaltfläche zum Durchsuchen und Einfügen von Dateien; es ist kein funktionsgleicher Ersatz für diese Produkte.

Laravel
PHP
WordPress
Plugin
React
Component
Vue / Nuxt
Component
CKEditor 4
Plugin
CKEditor 5
Plugin
TinyMCE
Plugin
Summernote
Plugin

Einbetten

In wenigen Zeilen einbetten

Laden Sie fluxfiles.js, übergeben Sie ein serverseitig erzeugtes JWT und setzen Sie einen vollwertigen Dateimanager — oder ein Dateiauswahl-Modal — in jede Seite.

<!-- npm install fluxfiles, or a pinned CDN build -->
<script src="https://unpkg.com/fluxfiles@1.0.1/fluxfiles.js"></script>

FluxFiles.open({
  endpoint: 'https://fm.example.com',
  token: 'eyJhbGci...',   // JWT from your backend
  disk: 'local',
  mode: 'picker',         // select & close
  theme: 'auto',
  onSelect(file) {
    // { url, key, name, size, disk, meta, variants }
    document.querySelector("#img").src = file.url;
  },
});
<div id="fm" style="height:600px"></div>

FluxFiles.open({
  endpoint: 'https://fm.example.com',
  token: 'eyJhbGci...',
  mode: 'browser',          // full manager, stays open
  container: '#fm',         // omit for a modal overlay
  disks: ['local', 's3', 'r2'],
});

FluxFiles.on('FM_EVENT', (e) => console.log(e.event));
FluxFiles.navigate('/photos/2024');
import { FluxFilesModal } from '@fluxfiles/react';

function Picker({ open, setOpen, token }) {
  return (
    <FluxFilesModal
      open={open}
      endpoint="https://fm.example.com"
      token={token}
      onSelect={(file) => console.log(file.url)}
      onClose={() => setOpen(false)}
    />
  );
}

Tokens werden serverseitig erzeugt — geben Sie Ihr Secret niemals an den Browser weiter.

Warum FluxFiles

Gebaut für das, was andere vergessen haben

Wischen zum Vergleichen
Funktion FluxFiles elFinder Laravel-FM RichFilemanager Responsive FM
S3 + R2 + Local + SFTP ✓ ⚠ ⚠ ⚠ ✗
Jedes Framework einbetten ✓ ⚠ ✗ ⚠ ✗
JWT-Auth + Scoping ✓ ✗ ✗ ✗ ✗
SEO-Metadaten ✓ ✗ ✗ ✗ ✗
AI Auto-Tag ✓ ✗ ✗ ✗ ✗
Bildzuschnitt ✓ ✓ ✗ ✗ ✗
Chunk-Upload ✓ ✗ ✗ ✗ ✗
Volltextsuche ✓ ✗ ✗ ✗ ✗
Dunkelmodus ✓ ✗ ⚠ ✗ ✗
16 Sprachen ✓ ✓ ✗ ✗ ✗
PHP ≥ 8.1 ✓ ✓ ✗ ✓ ✓
Aktiv gewartet ✓ ✓ ⚠ ✗ ✗
Moderne UI ✓ ✗ ⚠ ✗ ✗
Funktion FluxFiles Filestack Uploadcare Cloudinary Supabase Storage
Selbst gehostet (läuft in Ihrer Infrastruktur) ✓ ✗ ✗ ✗ ⚠
BYOB — der eigene Bucket jedes Kunden ✓ ⚠ ⚠ ✗ ✗
Einbettbare Dateimanager-UI ✓ ✓ ✓ ⚠ ✗
Open Source (MIT) ✓ ✗ ✗ ✗ ✓
Keine SaaS-Gebühren pro Speicher / Upload ✓ ✗ ✗ ✗ ⚠
Multi-Storage (S3 / R2 / lokal) ✓ ⚠ ✗ ✗ ✗
Token-Scoping pro Mandant integriert ✓ ⚠ ⚠ ⚠ ⚠

Der Vergleich spiegelt typische Standardangebote wider; jedes Produkt glänzt in seinem Bereich. Die Nische von FluxFiles ist die Kombination aus einbettbar, selbst gehostet und Bring-your-own-Bucket.

Vergleich Stand November 2026, unabhängig erstellt — Korrekturen bitte über das GitHub-Repository melden.

FAQ

Häufige Fragen

Wie funktioniert die Authentifizierung?
Zustandsloses JWT (HS256): Sie erzeugen serverseitig ein Token mit feingranularen Claims (Berechtigungen, Disks, Pfad-Scope, Limits), sodass jeder Nutzer nur sieht, was Sie erlauben.
Brauchen meine Nutzer ein FluxFiles-Konto?
Nein. FluxFiles vertraut dem JWT aus Ihrer eigenen App und fügt sich so in Ihre bestehende Authentifizierung ein — kein separates Nutzersystem.
Was brauche ich, um es zu betreiben?
PHP 8.1+ (8.1–8.5 getestet) mit gd, curl, json, openssl, mbstring, fileinfo (zip fürs Entpacken) und Composer 2 — oder das Docker-Image ghcr.io/thai-pc/fluxfiles. Auf einen Datenträger zeigen, Secret und erlaubte Origins setzen, starten — läuft auf einem kleinen VPS.
Können verschiedene Benutzer unterschiedliche Rechte haben?
Ja. Erstellen Sie einen Token mit feingranularen Claims (Lesen/Schreiben/Löschen, Disk, Pfadpräfix, Upload-Limits, erlaubte Endungen, owner-only), oder nutzen Sie eines von vier vordefinierten Rollen-Presets — viewer, editor, admin, superadmin —, um einen Token in einer Zeile statt mit einer langen Claims-Liste zu begrenzen.
Muss ich eine Datenbank betreiben?
Nein. Standardmäßig liegen alle Metadaten (Dateiinfos, Suchindex, Audit-Log) als JSON-Sidecars direkt neben Ihren Dateien — nichts Zusätzliches zu betreiben oder zu sichern. Wenn Sie diese Verwaltung lieber in Ihrer eigenen MySQL-, PostgreSQL- oder SQLite-Datenbank halten möchten, verschiebt der optionale Modus FLUXFILES_STORAGE_BACKEND=db sie dorthin; die Dateibytes bleiben in jedem Fall in Ihrem Storage.
Gibt es Nutzungsbeschränkungen?
Der Core selbst hat keine künstlichen Limits — keine Obergrenze für monatlich aktive Nutzer, kein erzwungener Upgrade-Hinweis. Sie legen Ihre eigenen Grenzen über JWT-Claims fest: Speicherkontingente pro Nutzer, Upload-Größen-/Endungsbeschränkungen und einen eingebauten Rate-Limiter (standardmäßig 60 Lese-/10 Schreibzugriffe pro Minute, konfigurierbar).