Product — FluxFiles
Alles wat een moderne bestandsbeheerder nodig heeft
Gebouwd voor ontwikkelaars die flexibiliteit nodig hebben.
Multi-opslag
Lokaal, AWS S3, Cloudflare R2, SFTP via Flysystem v3 — wissel via config, geen codewijziging.
Overal integreren
iframe + postMessage SDK. Standalone UI gebruikt Alpine.js (geen build). Werkt met elk framework.
JWT-auth + scoping
Pad-prefix per gebruiker, rechten, schijf-whitelist, alleen-eigenaar modus — of begin met een viewer/editor/admin rolpreset.
ACL-rolpresets
Geef tokens uit vanuit viewer-/editor-/admin-/superadmin-presets — één parameter zet meteen de juiste rechten-, schijf- en scope-claims, in plaats van ze handmatig samen te stellen.
AI auto-tag
Claude / OpenAI vision — automatisch alt-tekst, titel, tags.
Afbeelding bijsnijden
Inline bijsnijdtool met beeldverhouding-presets.
Afbeelding optimalisatie
Automatische WebP-varianten — thumb, medium, groot.
Vooraf ondertekende uploads
Browser uploadt rechtstreeks naar S3/R2 — nul bandbreedte op uw server.
Chunk upload
S3 multipart voor bestanden > 10MB.
Zoeken in volledige tekst
Geïndexeerde zoekopdracht op namen, titels, tags — standaard bestandsgebaseerd, of je eigen SQL-database als optionele backend.
DB-gebaseerde metadata
Optionele FLUXFILES_STORAGE_BACKEND=db-modus — metadata, zoek-/mapindex en auditlog staan in je eigen MySQL/PostgreSQL/SQLite in plaats van JSON-sidecars. Bestandsbytes blijven in beide gevallen in de storage.
Bulkbewerkingen
Multi-select verplaatsen, kopiëren, verwijderen, downloaden.
Cross-disk overdracht
Kopiëren/verplaatsen tussen Lokaal ↔ S3 ↔ R2.
Prullenbak
Herstelbare verwijderingen met automatische opschoning.
SEO-metadata
Titel, alt, bijschrift, tags — S3-objectmetadata (cloud) of sidecar JSON (lokaal). Zoeken in volledige tekst.
Donkere modus
Licht / donker / auto in UI en SDK.
16 talen
Standaard Engels. Stel taal in via SDK, URL (?locale=) of FLUXFILES_LOCALE. RTL voor Arabisch.
Auditlogboek
Alle schrijfacties gelogd voor compliance.
Snelheidsbeperking
Token bucket per gebruiker voor API-bescherming.
Opslagquota
Limieten per gebruiker via JWT-claims.
BYOB-buckets
Gebruikers koppelen eigen S3/R2 — inloggegevens versleuteld in JWT (AES-256-GCM).
Duplicaatdetectie
SHA-256-match slaat redundante uploads over tenzij geforceerd overschrijven.
SDK-token vernieuwen
onTokenRefresh bij 401 — samengevoegde refresh, opnieuw proberen, updateToken().
Bucket Doctor
Diagnosticeer elke S3/R2-schijf — credentials, lezen/schrijven/verwijderen, presign, CORS, multipart — met kant-en-klare IAM- en CORS-fixes. Onboard BYOB-buckets in minuten.
SFTP-schijf
Een 3e driver na S3/R2 — maak van elke VPS of host een bestandsbeheerder.
Code-/config-editor
Bewerk tekst- en configbestanden (wp-config.php, .env) in de browser, cPanel-stijl.
Zip & Uitpakken
Download een selectie als zip of pak een archief uit — beveiligd tegen zip-slip & bom.
Watermerk
Pas direct een tekst- of logo-watermerk toe ter bescherming — bron blijft ongemoeid.
On-demand WebP + AVIF
Serveer elke afbeeldingsgrootte als gecachte AVIF/WebP via één URL (Accept-onderhandeld), met kant-en-klare responsieve srcset.
SFTP-rechten
Wijzig Unix-bestandsrechten (chmod) op SFTP-schijven met een cPanel-achtig dialoog.
SSH-terminal
Embed je eigen ttyd / gotty / wetty als in-app terminal op SFTP-schijven via de gratis terminal_pty_url-claim — FluxFiles levert zelf geen shell mee.
Git-deploy met één klik
Pull en reset een Git-repo op je SFTP-server rechtstreeks vanuit de bestandsbeheerder — vaste vorm, geen willekeurige shell, hooks standaard uit.
Gebruiksdashboard
Opslag in één oogopslag — quota plus uitsplitsing per type en map.
Mediavoorbeeld
Inline voorbeeld van beeld, video, audio & PDF; privé lokale media veilig gestreamd.
Klaar in 2 minuten
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 De agent kan alleen aanraken wat zijn JWT toestaat — zijn disks, padprefix en rechten. Geef hem een smal, alleen-lezen 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. Naar productie: stel een FLUXFILES_SECRET van minimaal 32 bytes in, plus FLUXFILES_ALLOWED_ORIGINS (of FLUXFILES_FRAME_ANCESTORS). Maak de pakketroot je document root en blokkeer /_fluxfiles/ en .env in nginx. Zet de hoofd-JWT nooit in een URL — de adapters geven hem door via postMessage. DEPLOYMENT.md
Werkt met
Integraties
Kant-en-klare adapters voor jouw stack
Officiële adapters bouwen FluxFiles native in de frameworks en editors die je al gebruikt.
Gebruik CKEditor of TinyMCE met je eigen opslag, zonder abonnement op CKBox of Tiny Drive. FluxFiles voegt een werkbalkknop toe om bestanden te bladeren en in te voegen; het is geen functie-voor-functie vervanging van die producten.
Insluiten
Sluit het in een paar regels in
Laad fluxfiles.js, geef een server-uitgegeven JWT mee en plaats een volledige bestandsbeheerder — of een bestandskiezer-modal — op elke pagina.
<!-- 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 worden serverzijdig uitgegeven — stuur je secret nooit naar de browser.
Gebouwd voor wat anderen vergaten
| Functie | FluxFiles | elFinder | Laravel-FM | RichFilemanager | Responsive FM |
|---|---|---|---|---|---|
| S3 + R2 + Lokaal + SFTP | ✓ | ⚠ | ⚠ | ⚠ | ✗ |
| Integreren in elk framework | ✓ | ⚠ | ✗ | ⚠ | ✗ |
| JWT-auth + scoping | ✓ | ✗ | ✗ | ✗ | ✗ |
| SEO-metadata | ✓ | ✗ | ✗ | ✗ | ✗ |
| AI auto-tag | ✓ | ✗ | ✗ | ✗ | ✗ |
| Afbeelding bijsnijden | ✓ | ✓ | ✗ | ✗ | ✗ |
| Chunk upload | ✓ | ✗ | ✗ | ✗ | ✗ |
| Zoeken in volledige tekst | ✓ | ✗ | ✗ | ✗ | ✗ |
| Donkere modus | ✓ | ✗ | ⚠ | ✗ | ✗ |
| 16 talen | ✓ | ✓ | ✗ | ✗ | ✗ |
| PHP ≥ 8.1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| Actief onderhouden | ✓ | ✓ | ⚠ | ✗ | ✗ |
| Moderne UI | ✓ | ✗ | ⚠ | ✗ | ✗ |
| Mogelijkheid | FluxFiles | Filestack | Uploadcare | Cloudinary | Supabase Storage |
|---|---|---|---|---|---|
| Self-hosted (draait in je eigen infra) | ✓ | ✗ | ✗ | ✗ | ⚠ |
| BYOB — eigen bucket per klant | ✓ | ⚠ | ⚠ | ✗ | ✗ |
| Insluitbare bestandsmanager-UI | ✓ | ✓ | ✓ | ⚠ | ✗ |
| Open source (MIT) | ✓ | ✗ | ✗ | ✗ | ✓ |
| Geen SaaS-kosten per opslag / per upload | ✓ | ✗ | ✗ | ✗ | ⚠ |
| Multi-storage (S3 / R2 / lokaal) | ✓ | ⚠ | ✗ | ✗ | ✗ |
| Token-scoping per tenant ingebouwd | ✓ | ⚠ | ⚠ | ⚠ | ⚠ |
De vergelijking weerspiegelt typische standaardaanbiedingen; elk product blinkt uit in zijn eigen domein. De niche van FluxFiles is de insluitbare, self-hosted, bring-your-own-bucket-combinatie.
Vergelijking actueel per November 2026, onafhankelijk opgesteld — zie de GitHub-repository om een correctie te melden.
FAQ