製品 — FluxFiles
モダンなファイルマネージャーに必要なすべて
柔軟性を求める開発者のために構築。
マルチストレージ
ローカル、AWS S3、Cloudflare R2, SFTP — Flysystem v3経由。設定で切替、コード変更不要。
どこにでも埋め込み
iframe + postMessage SDK。スタンドアロンUIはAlpine.js(ビルド不要)。どのフレームワークでも可。
JWT認証 + スコーピング
ユーザーごとのパスプレフィックス、権限、ディスクホワイトリスト、owner-onlyモード——viewer/editor/adminのロールプリセットから始めることも可能。
ACLロールプリセット
viewer/editor/admin/superadminのプリセットからトークンを発行——1つのパラメータで適切な権限・ディスク・スコープのクレームが展開され、手動で組み立てる必要がありません。
AI自動タグ
Claude / OpenAI vision — altテキスト、タイトル、タグを自動生成。
画像クロップ
アスペクト比プリセット付きインラインクロップツール。
画像最適化
WebPバリアント自動生成 — サムネイル、中、大。
署名付きアップロード
ブラウザからS3/R2に直接アップロード — サーバー帯域ゼロ。
チャンクアップロード
10MB超ファイル向けS3マルチパート。
全文検索
ファイル名・タイトル・タグを索引検索——デフォルトはファイルベース、オプトインで自前のSQLデータベースをバックエンドに選択可能。
DBバックエンドのメタデータ
オプトインのFLUXFILES_STORAGE_BACKEND=dbモード——メタデータ、検索/フォルダインデックス、監査ログがJSONサイドカーの代わりに自前のMySQL/PostgreSQL/SQLiteに保存されます。ファイル本体はどちらの場合もストレージ側に残ります。
一括操作
複数選択して移動、コピー、削除、ダウンロード。
クロスディスク転送
ローカル ↔ S3 ↔ R2間のコピー/移動。
ゴミ箱
復元可能な削除、自動パージ。
SEOメタデータ
タイトル、alt、キャプション、タグ — クラウドはS3オブジェクトメタデータ、ローカルはsidecar JSON。全文検索。
ダークモード
UIとSDKでライト/ダーク/自動。
16言語
デフォルトは英語。SDK、URL (?locale=)、またはFLUXFILES_LOCALEで指定。アラビア語はRTL。
監査ログ
すべての書き込み操作を記録。
レート制限
ユーザーごとのトークンバケット。
ストレージクォータ
JWTクレームによるユーザーごとの制限。
BYOBバケット
ユーザー自身のS3/R2 — 認証情報はJWT内で暗号化(AES-256-GCM)。
重複検出
SHA-256一致で冗長アップロードをスキップ(強制上書き除く)。
SDKトークン更新
401時にonTokenRefresh — 更新の集約、再試行、updateToken()で事前更新。
バケットドクター
任意の S3/R2 ディスクを診断——認証情報、読み/書き/削除、署名付き URL、CORS、マルチパート——貼り付けるだけの IAM・CORS 修正付き。BYOB バケットを数分で導入。
SFTP ディスク
S3/R2 に次ぐ3つ目のドライバー。あらゆる VPS や共有ホストをファイル管理に。
コード / 設定エディタ
設定・テキストファイル(wp-config.php、.env など)をブラウザで編集(cPanel風)。
Zip と展開
選択をzipでダウンロード、またはその場で展開。zip-slip・爆弾対策済み。
ウォーターマーク
プレビュー保護のため文字やロゴの透かしを動的に付与。元ファイルは無変更。
オンデマンド WebP + AVIF
1つの URL で任意サイズの画像をキャッシュ済み AVIF/WebP として配信(Accept ネゴシエーション)、レスポンシブ srcset 付き。
SFTP 権限
cPanel風ダイアログでSFTPディスクのUnix権限(chmod)を変更。
SSHターミナル
SFTPディスク上のステートレスなコマンド実行ターミナル——cPanel風の管理ツールを無料で内蔵(フルPTYが必要なら自前のttydを埋め込み可能)。
ワンクリックGitデプロイ
ファイルマネージャーからSFTPサーバー上のGitリポジトリをpull・reset——固定形式で任意シェルではなく、hooksはデフォルトで無効。
使用状況ダッシュボード
ストレージを一目で把握。容量に加え、種類別・フォルダ別の内訳。
メディアプレビュー
画像・動画・音声・PDFをインライン表示。非公開ローカルメディアも安全に配信。
2分で起動
composer require fluxfiles/fluxfiles
cp .env.example .env
# .env
FLUXFILES_SECRET=your-random-32-char-secret
FLUXFILES_ALLOWED_ORIGINS=https://yourapp.com
require_once 'vendor/autoload.php';
$token = fluxfiles_token(
userId: 'user-123',
perms: ['read', 'write', 'delete'],
disks: ['local', 's3', 'r2'],
prefix: 'user-123/',
maxUploadMb: 10,
allowedExt: null,
ttl: 3600
); composer require fluxfiles/laravel
php artisan vendor:publish --tag=fluxfiles-config
# .env — point the adapter at your FluxFiles server
FLUXFILES_ENDPOINT=https://fm.yourdomain.com
FLUXFILES_SECRET=your-secret-min-32-chars
# Optional: match CORS on the FluxFiles host
# FLUXFILES_ALLOWED_ORIGINS=https://yourapp.com
# Config: config/fluxfiles.php npm install @fluxfiles/node
// 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)
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} <!-- Demo: unpkg. In production, serve fluxfiles.js from your FluxFiles host -->
<script src="https://unpkg.com/fluxfiles@latest/fluxfiles.js"></script>
<script>
FluxFiles.open({
endpoint: 'https://your-api.com',
token: 'eyJhbGci...',
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"
/> git clone https://github.com/thai-pc/fluxfiles.git
docker build -f fluxfiles/docker/Dockerfile.prod -t fluxfiles fluxfiles
docker run -p 8080:80 \\
-e FLUXFILES_SECRET=your-random-32-char-secret \\
fluxfiles
# UI: http://localhost:8080/public/index.html git clone https://github.com/thai-pc/fluxfiles.git
cd fluxfiles
composer install -d packages/core
cp .env.example .env
cd packages/core
php -S localhost:8080 router.php
# UI: http://localhost:8080/public/index.html
# API: http://localhost:8080/api/fm/list?disk=local&path= 対応フレームワーク
インテグレーション
あなたのスタックに差し込めるアダプター
公式アダプターで、すでに使っているフレームワークやエディターに FluxFiles をネイティブ統合できます。
組み込み
数行で組み込み
fluxfiles.js を読み込み、サーバーで発行した JWT を渡すだけで、完全なファイルマネージャー(またはファイル選択モーダル)をどのページにも設置できます。
<script src="https://fm.example.com/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)}
/>
);
} トークンはサーバー側で発行します。シークレットを絶対にブラウザへ送らないでください。
他が忘れたものを構築
| 機能 | FluxFiles | elFinder | Laravel-FM | RichFilemanager | Responsive FM |
|---|---|---|---|---|---|
| S3 + R2 + Local + SFTP | ✓ | ⚠ | ⚠ | ⚠ | ✗ |
| あらゆるフレームワークに埋め込み | ✓ | ⚠ | ✗ | ⚠ | ✗ |
| JWT認証 + スコーピング | ✓ | ✗ | ✗ | ✗ | ✗ |
| SEOメタデータ | ✓ | ✗ | ✗ | ✗ | ✗ |
| AI自動タグ | ✓ | ✗ | ✗ | ✗ | ✗ |
| 画像クロップ | ✓ | ✓ | ✗ | ✗ | ✗ |
| チャンクアップロード | ✓ | ✗ | ✗ | ✗ | ✗ |
| 全文検索 | ✓ | ✗ | ✗ | ✗ | ✗ |
| ダークモード | ✓ | ✗ | ⚠ | ✗ | ✗ |
| 16言語 | ✓ | ✓ | ✗ | ✗ | ✗ |
| PHP ≥ 8.1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| 積極的にメンテナンス中 | ✓ | ✓ | ⚠ | ✗ | ✗ |
| モダンUI | ✓ | ✗ | ⚠ | ✗ | ✗ |
| 機能 | FluxFiles | Filestack | Uploadcare | Cloudinary | Supabase Storage |
|---|---|---|---|---|---|
| セルフホスト(自社インフラで動作) | ✓ | ✗ | ✗ | ✗ | ⚠ |
| BYOB——各顧客が自分のバケット | ✓ | ⚠ | ⚠ | ✗ | ✗ |
| 埋め込み可能なファイルマネージャー UI | ✓ | ✓ | ✓ | ⚠ | ✗ |
| オープンソース(MIT) | ✓ | ✗ | ✗ | ✗ | ✓ |
| ストレージ/アップロード課金の SaaS 料金なし | ✓ | ✗ | ✗ | ✗ | ⚠ |
| マルチストレージ(S3 / R2 / ローカル) | ✓ | ⚠ | ✗ | ✗ | ✗ |
| テナント単位のトークンスコープを標準装備 | ✓ | ⚠ | ⚠ | ⚠ | ⚠ |
比較は一般的なデフォルト提供内容を反映しています。各製品はそれぞれの領域で優れています。FluxFiles のニッチは、埋め込み可能・セルフホスト・自前バケットの組み合わせです。
比較データはSeptember 2026時点のもので、第三者による非公式な比較です——修正が必要な場合はGitHubリポジトリでお知らせください。
FAQ