어디에든 임베드할 수 있는 파일 매니저
PHP ≥ 8.1 + Flysystem 3. Alpine.js UI. Local, S3, Cloudflare R2, SFTP. 몇 줄의 JavaScript로 임베드.
실제 동작 확인
고객의 파일은 고객 자신의 버킷에 보관됩니다
FluxFiles는 임베드 가능한 파일 관리자로, 각 테넌트가 자신의 S3/R2 버킷을 연결하며 — 여러분은 그들의 데이터나 자격 증명을 결코 저장하지 않습니다.
-
데이터 주권
파일은 고객 자신의 클라우드 계정과 리전에 저장됩니다 — GDPR, 컴플라이언스, 기업 조달에 적합.
-
저장 시 데이터·자격 증명 제로
버킷 자격 증명은 JWT 안에서 AES-256-GCM으로 암호화되고 런타임에만 복호화됩니다 — DB나 로그에 절대 기록하지 않습니다.
-
스토리지 비용은 0까지 확장
스토리지와 이그레스는 여러분이 아닌 각 고객에게 청구됩니다. 사용자 증가에 따라 늘어나는 청구서가 없습니다.
-
무상태 & 임베드 가능
중앙 데이터베이스 없음. iframe이나 SDK로 피커를 어떤 앱에든 임베드하고, 백엔드가 범위가 제한된 단기 토큰을 발급합니다.
작동 방식: 앱이 테넌트의 버킷 자격 증명을 단기 JWT(HKDF-SHA256 + AES-256-GCM)로 암호화합니다. FluxFiles는 요청된 작업을 수행할 때만 복호화합니다.
테넌트마다 토큰 하나 — 각자의 규칙으로
FluxFiles는 무상태입니다: 백엔드가 발급하는 JWT가 곧 그 테넌트의 설정입니다. 저장 경로, 파일 크기 제한, 할당량, 파일 수, 허용 형식, 권한 — 모두 서버에서 강제됩니다. 테넌트별 설정 파일도, 재시작도 필요 없습니다.
// Your backend, per request — the token IS the tenant's config.
import { createToken } from '@fluxfiles/node';
const claims = tenant.plan === 'pro'
// 100 MB/file · any type · 50 GB · unlimited files · own bucket
? { disks: ['s3'], maxUploadMb: 100, allowedExt: null,
maxStorageMb: 51200, maxFiles: 0 }
// 5 MB/file · images only · 500 MB · 200 files
: { disks: ['local'], maxUploadMb: 5, allowedExt: ['jpg','png','webp'],
maxStorageMb: 500, maxFiles: 200 };
const token = createToken({
secret: process.env.FLUXFILES_SECRET,
userId: tenant.id,
prefix: `tenant_${tenant.id}/`, // isolates each tenant's files
perms: ['read', 'write', 'delete'],
...claims,
}); BYOB와 함께 쓰면 각 테넌트를 자기 버킷에 분리할 수 있습니다.
파일 기능을 출시하는 팀을 위해
제품에 업로드가 필요하다면 FluxFiles를 그대로 끼워 넣으세요 — 고객 데이터의 관리자가 되지 않으면서.
SaaS·멀티테넌트 앱
모든 고객에게 자기 버킷의 파일 매니저를 제공합니다. 테넌트별 토큰 제한과 데이터 주권이 기본 내장.
에이전시·프리랜서
프로젝트마다 스토리지 인프라를 세우지 않고도 세련된 미디어 라이브러리를 고객에게 제공.
CMS·에디터 통합
iframe SDK로 CKEditor, TinyMCE, Summernote 또는 직접 만든 에디터에 미디어 피커를 추가.
내부 도구·대시보드
관리자 패널에 업로드·미리보기·감사 기록 파일 작업을 반나절 만에 추가.
현대적인 파일 매니저에 필요한 모든 것
유연성이 필요한 개발자를 위해 구축.
멀티 스토리지
로컬, AWS S3, Cloudflare R2, SFTP — Flysystem v3. 설정만으로 전환.
어디든 임베드
iframe + postMessage SDK. 독립 UI는 Alpine.js(빌드 없음). 모든 프레임워크와 호환.
JWT 인증 + 스코핑
사용자별 경로 접두사, 권한, 디스크 화이트리스트, owner-only 모드.
AI 자동 태그
Claude / OpenAI vision — alt 텍스트, 제목, 태그 자동 생성.
이미지 자르기
종횡비 프리셋이 있는 인라인 자르기 도구.
이미지 최적화
WebP 변형 자동 생성 — 썸네일, 중간, 대형.
사전 서명 업로드
브라우저에서 S3/R2로 직접 업로드 — 서버 대역폭 제로.
청크 업로드
10MB 초과 파일용 S3 멀티파트.
전체 텍스트 검색
이름, 제목, 태그 인덱스 검색 — 파일 기반, 데이터베이스 불필요.
일괄 작업
다중 선택 이동, 복사, 삭제, 다운로드.
크로스 디스크 전송
로컬 ↔ S3 ↔ R2 간 복사/이동.
휴지통
복구 가능한 삭제, 자동 정리.
SEO 메타데이터
제목, alt, 캡션, 태그 — 클라우드는 S3 객체 메타데이터, 로컬은 sidecar JSON. 전체 텍스트 검색.
다크 모드
UI 및 SDK에서 라이트/다크/자동.
16개 언어
기본 영어. SDK, URL (?locale=), FLUXFILES_LOCALE로 설정. 아랍어 RTL.
감사 로그
모든 쓰기 작업 기록.
속도 제한
사용자별 토큰 버킷 API 보호.
저장소 할당량
JWT 클레임을 통한 사용자별 제한.
BYOB 버킷
사용자 자체 S3/R2 — JWT 내 자격 증명 암호화(AES-256-GCM).
중복 감지
SHA-256 일치 시 강제 덮어쓰기 전까지 중복 업로드 건너뜀.
SDK 토큰 갱신
401 시 onTokenRefresh — 갱신 병합, 재시도, updateToken()으로 사전 갱신.
버킷 닥터
모든 S3/R2 디스크를 진단 — 자격 증명, 읽기/쓰기/삭제, 프리사인, CORS, 멀티파트 — 붙여넣기만 하면 되는 IAM·CORS 수정안 포함. BYOB 버킷을 몇 분 만에 온보딩.
Node 토큰 SDK
@fluxfiles/node로 모든 JS 백엔드(Express, Next.js, Nuxt)에서 FluxFiles 토큰 발급 — PHP 코어와 바이트 호환. 토큰 발급에 PHP 불필요.
SFTP 디스크
S3/R2에 이은 세 번째 드라이버 — VPS·공유 호스트를 파일 관리자로.
코드 / 설정 편집기
텍스트·설정 파일(wp-config.php, .env, nginx.conf)을 브라우저에서 편집.
압축 & 해제
선택 항목을 zip으로 받거나 제자리에서 해제 — zip-slip·폭탄 방어.
워터마크
미리보기 보호를 위해 텍스트·로고 워터마크를 즉시 적용 — 원본은 그대로.
온디맨드 WebP + AVIF
하나의 URL로 모든 크기 이미지를 캐시된 AVIF/WebP로 제공(Accept 협상), 반응형 srcset 포함.
SFTP 권한
cPanel 스타일 대화상자로 SFTP 디스크의 유닉스 권한(chmod) 변경.
사용량 대시보드
스토리지를 한눈에 — 할당량과 유형별·폴더별 분석.
미디어 미리보기
이미지·동영상·오디오·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 });
}); <!-- 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 | ✓ | ✗ | ⚠ | ✗ | ✗ |
셀프 호스팅 & 임베드 가능 — 또 하나의 업로드 SaaS가 아닙니다
호스팅형 파일 API도 훌륭하지만 데이터를 저장하고 사용량에 따라 과금합니다. FluxFiles는 여러분의 스택에서 실행되고 각 테넌트가 자체 버킷을 사용합니다.
| 기능 | FluxFiles | Filestack | Uploadcare | Cloudinary | Supabase Storage |
|---|---|---|---|---|---|
| 셀프 호스팅(자체 인프라에서 실행) | ✓ | ✗ | ✗ | ✗ | ⚠ |
| BYOB — 각 고객의 자체 버킷 | ✓ | ⚠ | ⚠ | ✗ | ✗ |
| 임베드 가능한 파일 관리자 UI | ✓ | ✓ | ✓ | ⚠ | ✗ |
| 오픈 소스(MIT) | ✓ | ✗ | ✗ | ✗ | ✓ |
| 스토리지/업로드별 SaaS 요금 없음 | ✓ | ✗ | ✗ | ✗ | ⚠ |
| 멀티 스토리지(S3 / R2 / 로컬) | ✓ | ⚠ | ✗ | ✗ | ✗ |
| 테넌트별 토큰 범위 기본 제공 | ✓ | ⚠ | ⚠ | ⚠ | ⚠ |
비교는 일반적인 기본 제공 기능을 반영합니다. 각 제품은 고유 영역에서 뛰어납니다. FluxFiles의 틈새는 임베드 가능·셀프 호스팅·자체 버킷의 조합입니다.
판매 가능한 제품
파일 관리를 넘어——송수신까지
무료 코어는 파일 매니저를 임베드. 유료 모듈은 고객이 비용을 지불하는 제품으로 바꿉니다.
Branded Share
어떤 파일이나 폴더든 브랜드가 적용된 셀프서비스 링크로 전송——만료, 비밀번호, 다운로드 한도, 조회 분석 포함. 당신의 로고, 당신의 도메인.
- 만료/비밀번호 보호 링크
- 다운로드 한도 + 조회 분석
- 범위 토큰——수신자 계정 불필요
Upload Portals
공개 “파일 보내주세요” 페이지가 곧바로 스토리지로. 에이전시, 사진작가, 고객 온보딩에 완벽——업로더 계정 불필요.
- 공개 포털 → 내 버킷
- 포털별 크기/유형/만료 제한
- 익명 업로드, 소유자 범위
Compliance bundle
바이러스 검사, C2PA 콘텐츠 출처, 감사 보존——규제 및 엔터프라이즈 배포용.
WordPress
세 개 대신 하나의 플러그인
WordPress에서 FluxFiles는 고객 파일 포털이자 미디어 매니저——개별 폴더·클라우드·오프로드 플러그인을 대체.
| 기능 | FluxFiles | FileBird | WP Media Folder | WP Offload |
|---|---|---|---|---|
| 미디어 폴더 | — | |||
| S3 / R2 / SFTP 저장 | — | |||
| 오프로드 + URL 재작성 | — | — | ||
| 고객 업로드 포털 | — | — | — | |
| 브랜드 공유 링크 | — | — | — | |
| 일반 가격 | 라이선스 1개 | $49/년 | $69/년 | 유료 |
폴더 + 클라우드 + 오프로드 + 고객 포털을 하나로——FileBird와 WP Media Folder와 WP Offload를 따로 사는 대신.
요금
코어는 무료. 유료 모듈에만 결제.
MIT 코어는 영구 무료. 두 핵심 제품——브랜드 공유 + 업로드 포털——과 그 이상으로 업그레이드.
무료(코어)
완전한 MIT 파일 매니저, 셀프 호스팅.
시작하기- Local / S3 / R2 / SFTP 저장소, JWT 범위 지정
- 온디맨드 WebP + AVIF + 이미지/PDF 최적화
- 워터마크, 버전 훅, 사용량 대시보드, AI 자동 태그
- 어댑터 7종 + BYO-embed 터미널 / PDF / office / 전자서명
Pro
고객과 파일 송수신.
출시 예정출시 예정- 무료 버전의 모든 것
- 브랜드 공유——만료/비밀번호/한도/분석 링크
- 업로드 포털——공개 “파일 보내주세요”, 계정 불필요
- 우선 지원 + 업데이트
Studio
FluxFiles 위에 제품 구축.
출시 예정출시 예정- Pro의 모든 것
- 버전 관리 + Webhooks(Zapier/Make/n8n)
- AI 비전 + OCR(자체 키)
- 멀티테넌트 권한 계층 + 화이트라벨
Enterprise
규정 준수, 대규모.
영업 문의- Studio의 모든 것
- 바이러스 검사 + C2PA 출처 + 감사 보존
- SSO 브리지 + 맞춤 온보딩
- SLA + 우선 로드맵
정액·사이트 무제한——파일/호출당 과금 없음. 연간 결제 시 약 2개월 절약. 평생 옵션 제공. 14일 환불. 구매자 VAT는 결제 시 처리.
FAQ