explaingit

studio-42/elfinder

4,787JavaScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

A browser-based file manager that looks and works like a desktop file explorer, with drag-and-drop, right-click menus, and cloud storage support for Dropbox, Google Drive, S3, and more.

Mindmap

mindmap
  root((repo))
    What it does
      Web file manager
      Browser-based UI
      Cloud storage access
    UI Features
      Drag and drop
      Context menus
      File preview
      In-browser editing
    Storage Backends
      Local filesystem
      FTP and SFTP
      Dropbox
      Google Drive
      AWS S3
    Integrations
      CKEditor
      TinyMCE
      CMS embedding
    Tech Stack
      JavaScript
      jQuery
      PHP
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Embed a full-featured file manager in a CMS or admin panel so users can upload and organize files without FTP access

USE CASE 2

Connect CKEditor or TinyMCE to elFinder so content authors can pick images from a server-side media library

USE CASE 3

Add Dropbox, Google Drive, or S3 as a virtual folder accessible from a web browser without writing custom cloud code

USE CASE 4

Build a multi-user file interface with configurable upload limits, allowed file types, and image auto-resize on upload

Tech stack

JavaScriptjQueryjQuery UIPHP

Getting it running

Difficulty · moderate Time to first run · 30min

Versions 2.1.67 and earlier have serious security vulnerabilities, only deploy current releases on public-facing servers.

Use freely including in commercial products as long as you keep the copyright notice and do not use the project name for endorsement.

In plain English

elFinder is a web-based file manager that lets users browse, organize, and manage files on a server through a browser, similar to the file manager built into a desktop operating system. The interface takes inspiration from the Finder application on macOS, with familiar operations like drag and drop, right-click context menus, keyboard shortcuts, and both list and icon views. The tool runs as a JavaScript front-end built with jQuery and jQuery UI, paired with a server-side connector written in PHP. You install it on a web server, configure the connector to point at the files you want to expose, and users can then access it through any modern browser on desktop or mobile. No special client software is required. File operations available through the interface include copying, moving, uploading, creating folders, renaming, and deleting. Large file uploads are handled in chunks so they do not time out on slow connections. Users can also upload files directly from a URL, extract and create archives in formats like zip and tar, preview common file types without leaving the browser, and edit text files and images in place. Storage is not limited to the server's local file system. elFinder ships with drivers for FTP, SFTP, MySQL, and several cloud storage services including Dropbox, Google Drive, OneDrive, and Box. It also works with AWS S3, Azure, and DigitalOcean Spaces through a third-party Flysystem driver. The project is commonly embedded in content management systems as a media picker, with documented integration paths for editors like CKEditor and TinyMCE. Access rights, allowed upload types, and the user interface itself are all configurable. Server-side plugins cover tasks like auto-resizing uploaded images, adding watermarks, and normalizing file names. elFinder is released under the BSD 3-Clause license. The README carries a prominent warning that versions 2.1.67 and earlier have serious security vulnerabilities and should not remain on public servers.

Copy-paste prompts

Prompt 1
Set up elFinder on my PHP server and embed it in a web page so I can browse and manage server files from the browser
Prompt 2
Integrate elFinder with TinyMCE as a file picker so users can insert images from the server into the rich text editor
Prompt 3
Configure elFinder to use an AWS S3 bucket as a storage volume via the Flysystem driver
Prompt 4
Add a Google Drive volume to elFinder so files from my Google account appear alongside local server files
Prompt 5
Write elFinder config to restrict uploads to image files only and auto-resize them to 1200px wide on upload
Open on GitHub → Explain another repo

← studio-42 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.