theFinder

theFinder bir React bileşeni, bir CSS dosyası ve tek bir API ucu. Arayüz hiçbir UI kütüphanesine bağlı değil. Sunucu tarafı Web standardı Request → Response üzerine kurulu, bu yüzden Next.js, Bun, Node, Express, Fastify, Koa ve Hono ile aynı kodla çalışıyor. Dosyalar yerel diskte, S3'te ya da ikisinde birden duruyor. Çekirdeğin çalışma zamanı bağımlılığı: sıfır.

Öne çıkanlar.

Sanal liste

10.000 dosyalık klasör. Takılmadan.

~100 DOM öğesi, klasörde kaç dosya olursa olsun.
Sürüm geçmişi

Her kaydın önceki hali saklanır. Veritabanı yok.
1. teklif-2026.mdŞimdiki hal
2. Düzenleme öncesi2 dk önce · 412 B
3. Optimizasyon öncesiDün · 1,8 MB
4. Yükleme öncesi3 Eki · 1,9 MB
Çöp kutusu

Delete onay sormaz. Çünkü geri alınabilir.

“kapak.jpg” çöpe taşındı

Silinen öğeler volume içindeki .tf-trash klasöründe 30 gün bekler. Yerel diskte de S3'te de.

S3, R2, MinIO

Bulut depolama. AWS SDK olmadan.

s3Driver({
  bucket: "my-bucket",
  region: "auto",
  endpoint: "https://…r2.cloudflarestorage.com",
})

SigV4 imzası Web Crypto ile. Edge runtime'da da çalışır.

Klavye

Fareye hiç dokunmadan.

Space Hızlı bakış F2 Yeniden adlandır CtrlC Kopyala ShiftDel Kalıcı sil CtrlF Editörde bul abc Yazarak atla
Erişilebilirlik

axe-core taraması, açık ve koyu temada.

0 WCAG 2.1 AA ihlali. Liste görünümü bir ARIA grid, simge görünümü bir listbox.
Next.js

output: "standalone" dahil.

proje/ .next/standalone/server.js uploads/ ← dosyalar her modda burada app/api/files/route.ts

Bir dakikada theFinder.

Kement seçimi, hızlı bakış, kes-yapıştır, görsel editörü, sanal liste ve elFinder karşılaştırması, sessiz bir kısa filmde.

Backend'iniz hangisiyse.

Motor tek bir fonksiyon: finder.handler(request) bir Request alır, bir Response döner. Bun, Hono ve Next.js bunu olduğu gibi kullanır; Express, Fastify ve Koa için ince adaptörler hazır.

Yüklemeler parça parça gelir ve sunucu yüklemeler arasında durum tutmaz. Gövde limitine takılmaz, serverless'ta da çalışır.

app/api/files/route.ts

import {
  createTheFinder, createNextRoutes, localDriver, uploadsDir,
} from "@thefinder/next";

const finder = createTheFinder({
  volumes: [{
    id: "uploads",
    driver: localDriver({ root: uploadsDir() }),
    url: "/uploads",
  }],
});

export const runtime = "nodejs";
export const { GET, POST } = createNextRoutes(finder);

server.ts

const driver = localDriver({ root: "./uploads" });
const finder = createTheFinder({
  volumes: [{ id: "files", driver, url: "/uploads" }],
});

Bun.serve({
  routes: {
    "/api/files": finder.handler,
    "/uploads/*": createFileServer({ driver, prefix: "/uploads" }),
  },
});

server.mjs

import { toExpress } from "@thefinder/core/node";

app.all("/api/files", toExpress(finder.handler));
app.get("/uploads/*", toExpress(
  createFileServer({ driver, prefix: "/uploads" }),
));

// express.json() önce çalışmış olsa bile sorun yok:
// adaptör okunmuş gövdeyi yeniden oluşturur.

server.ts

import { toFastify } from "@thefinder/core/node";

fastify.register(toFastify(finder.handler), { prefix: "/api/files" });

// Eklenti kendi kapsamında gövde ayrıştırmayı kapatır.

server.ts

import { toKoa } from "@thefinder/core/node";

router.all("/api/files", toKoa(finder.handler));

index.ts

// Adaptör gerekmez: Hono zaten Web standardı Request kullanır.
app.all("/api/files", (c) => finder.handler(c.req.raw));

Disk de. Bulut da. Aynı anda.

Her depolama bir volume. Kenar çubuğunda yan yana görünürler; aralarında kopyalayıp taşıyabilirsiniz.

localDriver Yerel disk <proje>/uploads

kopyala · taşı

@thefinder/core Motor yetki · sürümler · çöp · küçük resimler

multipart · presigned

s3Driver S3 · R2 · MinIO Spaces · Backblaze B2

Kendi sürücünüzü yazın. FTP, Azure Blob, Google Drive… StorageDriver arayüzündeki dokuz metodu uygulamak yeterli.
Sunucu durum tutmaz. Yükleme oturumu istemcide taşınır; her parçada hedef, izin ve uzantı yeniden doğrulanır.
Veritabanı gerekmez. Çöp kutusu, sürümler ve küçük resimler volume içindeki gizli .tf-* klasörlerinde durur.

İçinde gelenler.

Monaco yok, CodeMirror yok, CDN'den yüklenen bir şey yok. Editörler paketin kendisinde.

Kod editörü

13 dil ailesi için renklendirme, bul ve değiştir, satıra git, akıllı girinti, Ctrl+S ile kaydetme. Kaydetmeden önce eski hal sürüm geçmişine girer.

Markdown

Yan yana önizlemeli düzenleme. Ham HTML işlenmez, bağlantılar güvenli şemalarla sınırlı; güvenilmeyen bir dosyayı açmak zararsızdır.

Görsel editörü

Kırp, döndür, çevir, yeniden boyutlandır; biçim ve kalite seç. Seçili görselleri toplu olarak WebP ya da AVIF'e çevir.

Hızlı bakış

Space ile görsel, video, ses, PDF, kod ve Markdown önizlemesi. Video ileri sarma Range istekleriyle çalışır.

Dosya seçici

useFilePicker bir Promise döner: formunuza “Dosya seç” düğmesi eklemek üç satır. React dışında openFilePicker.

CKEditor

CKEditor 5 eklentisi ve CKEditor 4 connector'ı. CKFinder'ın işini görür: araç çubuğu düğmesi, yapıştırılan görsellerin yüklenmesi.

Güvenlik, varsayılan olarak açık.

Bir dosya yöneticisi sunucunuza yazma izni demektir. theFinder bunu ilk günden ciddiye alır.

Path traversal: .. içeren yollar çözülmeye çalışılmaz, reddedilir. Kök dışını gösteren symlink'ler gizlenir.
CSRF: Değişiklik yapan her istek POST olmak ve x-thefinder başlığını taşımak zorunda.
Arşivler: Zip-slip ve zip bombası koruması. Açılan toplam boyut sınırlı.
Aktif içerik: Yüklenen HTML ve SVG, sandbox CSP ile sunulur; sitenizin origin'inde script çalıştıramaz.
Yetkilendirme: Her komuttan önce authorize. 401, 403 ya da istek bazında salt okunur mod.
İzinler: Volume bazında readOnly, yol bazında permission, uzantı listeleri ve boyut sınırı.

theFinder ve elFinder.

elFinder, web dosya yöneticileri denince akla gelen ilk isim ve on beş yılı aşkın süredir sahada. theFinder aynı işi bugünün yığınıyla yeniden düşünüyor. İkisi de iyi araçlar; hangisinin size uyduğu, projenizin nasıl kurulduğuna bağlı.

Özellik

theFinder React · TypeScript · 2026

elFinder jQuery · PHP · 2.1 serisi

Teknoloji

Arayüz React 18+ bileşeni, saf CSS (@layer, container query) jQuery ve jQuery UI eklentisi

Sunucu TypeScript, Web standardı Request → Response. Node, Bun, Deno, edge. Resmî bağlayıcı PHP. Diğer diller için topluluk bağlayıcıları.

Bağımlılıklar Çekirdekte sıfır. Arayüzde yalnızca react (peer). İstemcide jQuery ve jQuery UI

Next.js Hazır route'lar, standalone uyumlu proje kökü tespiti Resmî entegrasyon yok

Protokol Tek uç, JSON zarfı, tipli istemci (@thefinder/core/client) Tek uç, elFinder protokolü (cmd=open…)

Depolama

Yerel disk Var Var

S3 uyumlu Dahili, AWS SDK'sız; multipart, presigned URL Ek sürücü paketiyle (örneğin Flysystem)

FTP, Dropbox, Google Drive, OneDrive, Box Hazır değil; StorageDriver ile yazılabilir Dahili sürücüler

Birden çok volume, aralarında taşıma Var Var

Dosya işlemleri

Parçalı ve klasörlü yükleme Var; sunucu durum tutmaz Var

Çoklu indirmede zip Akışla, anında; zip64 Var

Arşiv biçimleri Zip; kendi kodu, sunucuda araç gerekmez Zip, tar, gzip, bzip2, 7z, rar; sunucudaki araçlarla

Çöp kutusu Varsayılan açık, “Geri al” bildirimi, otomatik temizlik Ayrı bir çöp volume'ü yapılandırılarak

Sürüm geçmişi Var; önizle, geri yükle, toplu temizle Yok

Depolama paneli Türlere göre kullanım, en büyük dosyalar, temizlik Yok

Toplu görsel dönüştürme WebP, AVIF, JPEG, PNG; boyutlandırma ve sıkıştırma Tek görsel için boyutlandırma, kırpma, döndürme

Editörler ve arayüz

Kod ve Markdown editörü Dahili, bağımlılıksız Düz metin dahili; Ace, CodeMirror gibi editörler CDN'den yüklenir

Büyük klasörler Sanal liste: 10.000 dosyada ~100 DOM öğesi Kaydırdıkça parça parça çizim

Erişilebilirlik ARIA grid ve listbox, axe-core ile 0 ihlal Klavye kısayolları

Tema Açık, koyu, otomatik; Klasik ve macOS görünümü; CSS değişkenleri jQuery UI temaları ve topluluk temaları

Dil Türkçe ve İngilizce; messages ile ek dil 30'dan fazla dil

Ekosistem

Dosya seçici useFilePicker, openFilePicker (Promise) getFileCallback

Editör entegrasyonu CKEditor 5 ve 4 paketi CKEditor, TinyMCE ve diğerleri için tarifler

Olgunluk Yeni; 0.x sürümleri 15 yılı aşkın; Laravel, Symfony, Django, WordPress eklentileri

Lisans MIT BSD-3-Clause

theFinder'ı seçin, eğer

Uygulamanız React, Next.js ya da bir JavaScript sunucusu üzerindeyse,
dosyalar S3 ya da R2'de duruyorsa veya serverless'ta çalışıyorsanız,
sürüm geçmişi, çöp kutusu ve görsel optimizasyonu kurulumla gelsin istiyorsanız,
arayüzün tasarım sisteminize CSS değişkenleriyle uymasını istiyorsanız.

elFinder'da kalın, eğer

Sunucunuz PHP ise ve öyle kalacaksa,
Dropbox, Google Drive ya da FTP'ye bugün bağlanmanız gerekiyorsa,
tar, 7z, rar gibi arşivlerle çalışıyorsanız,
Türkçe ve İngilizce dışında dillere hazır çeviri gerekiyorsa.

elFinder bilgileri 2.1 serisinin belgelerine göre derlendi. Yanlış ya da eskimiş bir satır görürseniz bir issue açın.

Dört paket. İhtiyacınız kadarını kurun.

npm i @thefinder/core @thefinder/react @thefinder/next

@thefinder/core: Sunucu motoru, yerel ve S3 sürücüleri, Node adaptörleri, tarayıcı istemcisi. Çalışma zamanı bağımlılığı yok.
@thefinder/react: <TheFinder /> bileşeni, useFilePicker, openFilePicker ve styles.css.
@thefinder/next: Next.js route'ları ve standalone uyumlu proje kökü tespiti.
@thefinder/ckeditor: CKEditor 5 eklentisi ve CKEditor 4 connector'ı.

Kendiniz görün.

Demoyu tam ekran aç Kuruluma başlayın

Web için bir Finder.

Öne çıkanlar.

10.000 dosyalık klasör. Takılmadan.

Her kaydın önceki hali saklanır. Veritabanı yok.

Delete onay sormaz. Çünkü geri alınabilir.

Bulut depolama. AWS SDK olmadan.

Fareye hiç dokunmadan.

axe-core taraması, açık ve koyu temada.

`output: "standalone"` dahil.

Bir dakikada theFinder.

Backend'iniz hangisiyse.

Disk de. Bulut da. Aynı anda.

İçinde gelenler.

Kod editörü

Markdown

Görsel editörü

Hızlı bakış

Dosya seçici

CKEditor

Güvenlik, varsayılan olarak açık.

theFinder ve elFinder.

Teknoloji

Depolama

Dosya işlemleri

Editörler ve arayüz

Ekosistem

theFinder'ı seçin, eğer

elFinder'da kalın, eğer

Dört paket. İhtiyacınız kadarını kurun.

Kendiniz görün.

Öne çıkanlar.

10.000 dosyalık klasör. Takılmadan.

Her kaydın önceki hali saklanır. Veritabanı yok.

Delete onay sormaz. Çünkü geri alınabilir.

Bulut depolama. AWS SDK olmadan.

Fareye hiç dokunmadan.

axe-core taraması, açık ve koyu temada.

output: "standalone" dahil.

Bir dakikada theFinder.

Backend'iniz hangisiyse.

Disk de. Bulut da. Aynı anda.

İçinde gelenler.

Kod editörü

Markdown

Görsel editörü

Hızlı bakış

Dosya seçici

CKEditor

Güvenlik, varsayılan olarak açık.

theFinder ve elFinder.

Teknoloji

Depolama

Dosya işlemleri

Editörler ve arayüz

Ekosistem

theFinder'ı seçin, eğer

elFinder'da kalın, eğer

Dört paket. İhtiyacınız kadarını kurun.

Kendiniz görün.

`output: "standalone"` dahil.