どこにでも埋め込めるファイルマネージャー
PHP ≥ 8.1 + Flysystem 3。Alpine.js UI。Local、S3、Cloudflare R2。数行のJavaScriptで埋め込み。
実際の動作を確認
モダンなファイルマネージャーに必要なすべて
柔軟性を求める開発者のために構築。
マルチストレージ
ローカル、AWS S3、Cloudflare R2 — Flysystem v3経由。設定で切替、コード変更不要。
どこにでも埋め込み
iframe + postMessage SDK。スタンドアロンUIはAlpine.js(ビルド不要)。どのフレームワークでも可。
JWT認証 + スコーピング
ユーザーごとのパスプレフィックス、権限、ディスクホワイトリスト、owner-onlyモード。
AI自動タグ
Claude / OpenAI vision — altテキスト、タイトル、タグを自動生成。
画像クロップ
アスペクト比プリセット付きインラインクロップツール。
画像最適化
WebPバリアント自動生成 — サムネイル、中、大。
署名付きアップロード
ブラウザからS3/R2に直接アップロード — サーバー帯域ゼロ。
チャンクアップロード
10MB超ファイル向けS3マルチパート。
全文検索
SQLite FTS5でファイル名、タイトル、タグを検索。
一括操作
複数選択して移動、コピー、削除、ダウンロード。
クロスディスク転送
ローカル ↔ 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()で事前更新。
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 <!-- Demo: unpkg. In production, serve fluxfiles.js from your FluxFiles host -->
<script src="https://unpkg.com/fluxfiles@1.22.0/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
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 | elFinder | Laravel-FM | RichFilemanager | Responsive FM |
|---|---|---|---|---|---|
| S3 + R2 + Local | ✓ | ⚠ | ⚠ | ⚠ | ✗ |
| あらゆるフレームワークに埋め込み | ✓ | ⚠ | ✗ | ⚠ | ✗ |
| JWT認証 + スコーピング | ✓ | ✗ | ✗ | ✗ | ✗ |
| SEOメタデータ | ✓ | ✗ | ✗ | ✗ | ✗ |
| AI自動タグ | ✓ | ✗ | ✗ | ✗ | ✗ |
| 画像クロップ | ✓ | ✓ | ✗ | ✗ | ✗ |
| チャンクアップロード | ✓ | ✗ | ✗ | ✗ | ✗ |
| 全文検索 | ✓ | ✗ | ✗ | ✗ | ✗ |
| ダークモード | ✓ | ✗ | ⚠ | ✗ | ✗ |
| 16言語 | ✓ | ✓ | ✗ | ✗ | ✗ |
| PHP ≥ 8.1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| 積極的にメンテナンス中 | ✓ | ✓ | ⚠ | ✗ | ✗ |
| モダンUI | ✓ | ✗ | ⚠ | ✗ | ✗ |