Produkt — FluxFiles
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.
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
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.
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.
Gebaut für das, was andere vergessen haben
| 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