Try Live
Add Docs
Rankings
Pricing
Enterprise
Docs
Install
Install
Docs
Pricing
Enterprise
More...
More...
Try Live
Rankings
Add Docs
Laravel elFinder
https://github.com/barryvdh/laravel-elfinder
Admin
Laravel elFinder is a Laravel package that integrates the elFinder file manager with support for
...
Tokens:
6,578
Snippets:
66
Trust Score:
9.8
Update:
2 weeks ago
Context
Skills
Chat
Benchmark
89.4
Suggestions
Latest
Show doc for...
Code
Info
Show Results
Context Summary (auto-generated)
Raw
Copy
Link
# Laravel elFinder Laravel elFinder is a Laravel package that integrates the elFinder file manager into Laravel applications. It provides Composer-based installation with autoloading, asset publishing, and pre-built views for standalone usage as well as integrations with popular WYSIWYG editors including TinyMCE (versions 3, 4, and 5) and CKEditor 4. The package leverages Laravel's Flysystem integration, allowing you to use any configured filesystem disk as a storage backend for the file manager. It includes route configuration with middleware support, customizable access control callbacks, and support for Glide image processing. The package requires Laravel 9.x or higher and PHP 8.1+, with the default configuration storing files in a `storage` directory within the public folder. ## Installation Install the package via Composer and publish the required assets to the public directory. ```bash # Install the package composer require barryvdh/laravel-elfinder # Publish assets to public folder (required after each update) php artisan elfinder:publish # Optionally publish config file for customization php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=config # Optionally publish views for customization php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=views ``` ## Configuration Options The package provides extensive configuration options in `config/elfinder.php` for customizing storage directories, routes, middleware, and root configurations. ```php <?php // config/elfinder.php return [ // Directory for file storage (relative to public folder) 'dir' => ['storage'], // Filesystem disks using Laravel's Flysystem 'disks' => [ 'local', 'my-disk' => [ 'URL' => url('to/disk'), 'alias' => 'Local storage', ] ], // Route group configuration 'route' => [ 'prefix' => 'elfinder', 'middleware' => ['web', 'auth'], // Set to null to disable ], // Access control filter callback 'access' => 'Barryvdh\Elfinder\Elfinder::checkAccess', // Custom root configurations (overrides 'dir' setting) 'roots' => null, // Additional elFinder connector options // See: https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options-2.1 'options' => [], // Options merged with every root by default 'root_options' => [], ]; ``` ## Available Routes The package registers these routes automatically, all prefixed with the configured route prefix (default: `elfinder`). ```php <?php // Routes registered by ElfinderServiceProvider // Standalone file manager interface Route::get('/elfinder', 'ElfinderController@showIndex')->name('elfinder.index'); // API connector for elFinder operations Route::any('/elfinder/connector', 'ElfinderController@showConnector')->name('elfinder.connector'); // Popup selector for custom integrations Route::get('/elfinder/popup/{input_id}', 'ElfinderController@showPopup')->name('elfinder.popup'); // File picker with MIME type filtering Route::get('/elfinder/filepicker/{input_id}', 'ElfinderController@showFilePicker')->name('elfinder.filepicker'); // TinyMCE integrations Route::get('/elfinder/tinymce', 'ElfinderController@showTinyMCE')->name('elfinder.tinymce'); Route::get('/elfinder/tinymce4', 'ElfinderController@showTinyMCE4')->name('elfinder.tinymce4'); Route::get('/elfinder/tinymce5', 'ElfinderController@showTinyMCE5')->name('elfinder.tinymce5'); // CKEditor integration Route::get('/elfinder/ckeditor', 'ElfinderController@showCKeditor4')->name('elfinder.ckeditor'); // Usage in blade templates <a href="{{ route('elfinder.index') }}">Open File Manager</a> ``` ## TinyMCE 5.x Integration Integrate elFinder as the file picker for TinyMCE 5.x using the URL dialog API and postMessage communication. ```javascript // TinyMCE 5.x initialization with elFinder integration tinymce.init({ selector: 'textarea', plugins: 'image media link', toolbar: 'image media link', // Enable elFinder as file browser file_picker_callback: elFinderBrowser }); // elFinder browser callback function function elFinderBrowser(callback, value, meta) { // Use Laravel route helper or hardcode the URL var elfinder_url = '/elfinder/tinymce5'; tinymce.activeEditor.windowManager.openUrl({ title: 'File Manager', url: elfinder_url, // Handle file selection from elFinder onMessage: function(dialogApi, details) { if (details.mceAction === 'fileSelected') { var file = details.data.file; var info = file.name; // Handle different file types if (meta.filetype === 'file') { callback(file.url, {text: info, title: info}); } if (meta.filetype === 'image') { callback(file.url, {alt: info}); } if (meta.filetype === 'media') { callback(file.url); } dialogApi.close(); } } }); } ``` ## TinyMCE 4.x Integration Configure TinyMCE 4.x to use elFinder as the file browser with the windowManager API. ```javascript // TinyMCE 4.x initialization with elFinder tinymce.init({ selector: 'textarea', plugins: 'image media link', toolbar: 'image media link', // Set the file browser callback file_browser_callback: elFinderBrowser }); // elFinder browser function for TinyMCE 4.x function elFinderBrowser(field_name, url, type, win) { tinymce.activeEditor.windowManager.open({ file: '/elfinder/tinymce4', // Use absolute path title: 'elFinder 2.0', width: 900, height: 450, resizable: 'yes' }, { setUrl: function(url) { win.document.getElementById(field_name).value = url; } }); return false; } ``` ## CKEditor 4.x Integration Configure CKEditor 4.x to use elFinder as the file browser by setting the browse URL in CKEditor's config. ```javascript // CKEditor 4.x configuration CKEDITOR.replace('editor', { // Set elFinder as the file browser filebrowserBrowseUrl: '/elfinder/ckeditor', // Optional: Set specific browsers for images and links filebrowserImageBrowseUrl: '/elfinder/ckeditor', filebrowserLinkBrowseUrl: '/elfinder/ckeditor', // CKEditor will automatically use elFinder when clicking browse buttons toolbar: [ ['Bold', 'Italic'], ['Image', 'Link'] ] }); ``` ## Standalone Popup Selector Create a custom file selector that opens elFinder in a popup window and populates form inputs with selected file paths. ```html <!-- Include required CSS and JS for colorbox popup --> <link href="/assets/css/colorbox.css" rel="stylesheet"> <script src="/assets/js/jquery.colorbox-min.js"></script> <script src="/packages/barryvdh/elfinder/js/standalonepopup.min.js"></script> <!-- Form with file input and selector trigger --> <form> <label for="feature_image">Feature Image</label> <input type="text" id="feature_image" name="feature_image" value=""> <!-- Trigger element with popup_selector class and data-inputid attribute --> <a href="" class="popup_selector" data-inputid="feature_image">Select Image</a> <!-- Multiple selectors on same page --> <label for="document">Document</label> <input type="text" id="document" name="document" value=""> <button type="button" class="popup_selector" data-inputid="document">Browse Files</button> </form> ``` ## Using Filesystem Disks Configure elFinder to use Laravel's Flysystem disks for flexible storage backends including local, S3, and other adapters. ```php <?php // config/filesystems.php - Define your disks 'disks' => [ 'public' => [ 'driver' => 'local', 'root' => public_path(), 'url' => env('APP_URL'), 'visibility' => 'public', ], 's3-uploads' => [ 'driver' => 's3', 'key' => env('AWS_ACCESS_KEY_ID'), 'secret' => env('AWS_SECRET_ACCESS_KEY'), 'region' => env('AWS_DEFAULT_REGION'), 'bucket' => env('AWS_BUCKET'), ], ], // config/elfinder.php - Reference disks in elFinder 'disks' => [ // Simple disk reference (uses disk name as alias) 'local', // Disk with custom options 'public' => [ 'alias' => 'Public Files', ], // S3 disk with custom URL 's3-uploads' => [ 'URL' => 'https://mybucket.s3.amazonaws.com', 'alias' => 'Cloud Storage', ], ], ``` ## Glide Image Processing Integration Integrate Glide image processing library for on-the-fly image manipulation and thumbnail generation. ```php <?php // routes/web.php - Create Glide server route use League\Glide\ServerFactory; use Illuminate\Support\Facades\Route; Route::get('glide/{path}', function ($path) { $server = ServerFactory::create([ 'source' => app('filesystem')->disk('public')->getDriver(), 'cache' => storage_path('glide'), ]); return $server->getImageResponse($path, request()->query()); })->where('path', '.+'); // config/elfinder.php - Configure disk with Glide 'disks' => [ 'public' => [ 'glideURL' => '/glide', // Optional: Add glideKey for signed URLs // 'glideKey' => 'your-secret-key', ], ], ``` ## Custom Access Control Implement custom access control to restrict file and folder operations based on your application's requirements. ```php <?php // app/Services/ElfinderAccessControl.php namespace App\Services; class ElfinderAccessControl { /** * Check access permissions for elFinder operations. * * @param string $attr Attribute to check (read, write, locked, hidden) * @param string $path File or folder path * @param mixed $data Volume driver data * @param object $volume Volume driver instance * @return bool|null True to allow, false to deny, null for default behavior */ public static function checkAccess($attr, $path, $data, $volume) { // Hide and protect dotfiles (files starting with .) if (strpos(basename($path), '.') === 0) { return !($attr === 'read' || $attr === 'write'); } // Protect specific directories $protectedPaths = ['system', 'config', '.git']; if (in_array(basename($path), $protectedPaths)) { return $attr === 'read' ? true : false; // Read-only } // Allow elFinder to decide based on filesystem permissions return null; } } // config/elfinder.php - Use custom access control 'access' => 'App\Services\ElfinderAccessControl::checkAccess', ``` ## Custom Route Configuration Extend the service provider to fully customize elFinder routes, middleware, and controller behavior. ```php <?php // app/Providers/CustomElfinderServiceProvider.php namespace App\Providers; use Barryvdh\Elfinder\ElfinderServiceProvider; use Illuminate\Routing\Router; class CustomElfinderServiceProvider extends ElfinderServiceProvider { public function boot(Router $router) { // Call parent boot for view and asset setup parent::boot($router); } protected function map(Router $router) { // Custom route group with additional middleware $router->group([ 'prefix' => 'admin/files', 'middleware' => ['web', 'auth', 'admin'], 'namespace' => 'Barryvdh\Elfinder', ], function ($router) { $router->get('/', 'ElfinderController@showIndex') ->name('admin.elfinder.index'); $router->any('connector', 'ElfinderController@showConnector') ->name('admin.elfinder.connector'); $router->get('tinymce5', 'ElfinderController@showTinyMCE5') ->name('admin.elfinder.tinymce5'); }); } } // config/app.php - Register custom provider instead of default 'providers' => [ // Barryvdh\Elfinder\ElfinderServiceProvider::class, App\Providers\CustomElfinderServiceProvider::class, ], ``` ## Embedding elFinder in Blade Views Embed the elFinder file manager directly in your application's blade templates with custom styling and options. ```html <!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <title>File Manager</title> <!-- jQuery and jQuery UI (REQUIRED) --> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> <!-- elFinder CSS (REQUIRED) --> <link rel="stylesheet" type="text/css" href="{{ asset('packages/barryvdh/elfinder/css/elfinder.min.css') }}"> <link rel="stylesheet" type="text/css" href="{{ asset('packages/barryvdh/elfinder/css/theme.css') }}"> <!-- elFinder JS (REQUIRED) --> <script src="{{ asset('packages/barryvdh/elfinder/js/elfinder.min.js') }}"></script> <!-- Optional: Localization --> <script src="{{ asset('packages/barryvdh/elfinder/js/i18n/elfinder.de.js') }}"></script> <script type="text/javascript"> $(document).ready(function() { $('#elfinder').elfinder({ // Localization lang: 'de', // CSRF token for Laravel customData: { _token: '{{ csrf_token() }}' }, // Connector URL url: '{{ route("elfinder.connector") }}', // Sound files path soundPath: '{{ asset("packages/barryvdh/elfinder/sounds") }}', // UI customization height: 500, width: 'auto', // Callback when file is selected (for custom integrations) getFileCallback: function(file) { console.log('Selected file:', file.url); } }); }); </script> </head> <body> <div id="elfinder"></div> </body> </html> ``` ## Summary Laravel elFinder provides a complete file management solution for Laravel applications, offering seamless integration with popular WYSIWYG editors like TinyMCE and CKEditor. The package handles all the complexity of routing, asset management, and connector configuration while exposing a clean configuration API. Primary use cases include admin panels requiring file uploads, content management systems with rich text editors, and any application needing a visual file browser for selecting or managing files. The package follows Laravel conventions for service providers, configuration publishing, and middleware integration, making it straightforward to customize for specific requirements. Integration patterns include using named routes for editor callbacks, leveraging Flysystem disks for cloud storage backends, implementing custom access control for security requirements, and extending the service provider for advanced route customization. The Glide integration enables dynamic image processing for thumbnails and responsive images without manual preprocessing.