Laravel elFinder (barryvdh/laravel-elfinder)

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
Show doc for...
Context Summary (auto-generated)
Raw
# 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.