v1.22.0 — オープンソース · MITライセンス

どこにでも埋め込めるファイルマネージャー

PHP ≥ 8.1 + Flysystem 3。Alpine.js UI。Local、S3、Cloudflare R2。数行のJavaScriptで埋め込み。

PHP ≥ 8.1
フレームワーク不要
~3 KB
SDKバンドルサイズ
MIT
オープンソースライセンス
16
対応言語
プレビュー

実際の動作を確認

FluxFiles desktop file manager UI
FluxFiles mobile file manager UI
FluxFiles create folder modal
機能

モダンなファイルマネージャーに必要なすべて

柔軟性を求める開発者のために構築。

マルチストレージ

ローカル、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=

対応フレームワーク

Laravel WordPress React / Next.js Vue / Nuxt CKEditor 4 TinyMCE Any framework
FluxFilesを選ぶ理由

他が忘れたものを構築

機能 FluxFiles elFinder Laravel-FM RichFilemanager Responsive FM
S3 + R2 + Local
あらゆるフレームワークに埋め込み
JWT認証 + スコーピング
SEOメタデータ
AI自動タグ
画像クロップ
チャンクアップロード
全文検索
ダークモード
16言語
PHP ≥ 8.1
積極的にメンテナンス中
モダンUI