### Install Laravel elFinder Package

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Use Composer to require the package. Remember to run the publish command after installation.

```bash
composer require barryvdh/laravel-elfinder
```

```bash
php artisan elfinder:publish
```

--------------------------------

### Install Laravel elFinder Package

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Install the package via Composer. Publish assets to the public folder after installation or updates. Optionally publish the config and views files for customization.

```bash
composer require barryvdh/laravel-elfinder
```

```bash
php artisan elfinder:publish
```

```bash
php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=config
```

```bash
php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=views
```

--------------------------------

### Create Glide Server Route

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Set up a route to handle Glide image requests, specifying the source disk and cache path. This example uses the 'public' disk.

```php
Route::get('glide/{path}', function($path){
    $server = 	League\Glide\ServerFactory::create([
        'source' => app('filesystem')->disk('public')->getDriver(),
	'cache' => storage_path('glide'),
    ]);
    return $server->getImageResponse($path, Input::query());
})->where('path', '.+');

```

--------------------------------

### Standalone Popup Selector Setup

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Implement a custom file selector using elFinder in a popup window. This requires including specific CSS and JS files and using elements with the `popup_selector` class.

```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>
```

--------------------------------

### CKeditor 4.x Browse URL Configuration

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Configure this setting in your CKeditor 4 setup to point to the Elfinder integration route.

```javascript
config.filebrowserBrowseUrl = '/elfinder/ckeditor';
```

--------------------------------

### Configuring Filesystem Disks for elFinder

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Set up Laravel's Flysystem disks in `config/filesystems.php` and reference them in `config/elfinder.php` to enable flexible storage backends like local and S3.

```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',
    ],
],
```

--------------------------------

### Publish Configuration File

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Publish the elFinder configuration file to customize settings like default directories and access callbacks.

```bash
php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=config
```

--------------------------------

### Configure elFinder Disks

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Add Laravel filesystem disks to elFinder configuration to manage different storage locations. Extra options like URL and alias can be provided.

```php
'disks' => [
    'local',
    'my-disk' => [
        'URL' => url('to/disk'),
        'alias' => 'Local storage',
    ]
],

```

--------------------------------

### Configure Glide Server Route

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Set up a route in Laravel to handle Glide image requests for on-the-fly manipulation. Ensure the 'public' disk is configured with the correct glideURL.

```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',
    ],
],
```

--------------------------------

### Publish Views

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Publish the elFinder views to allow for customization of the file manager's appearance.

```bash
php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=views
```

--------------------------------

### Include Colorbox CSS

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Add this link to the <head> section of your HTML to include the Colorbox styles.

```html
<link href="/assets/css/colorbox.css" rel="stylesheet">
```

--------------------------------

### TinyMCE 5.x File Picker Callback

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Add this line to your TinyMCE 5 init configuration to enable the file picker.

```javascript
file_picker_callback : elFinderBrowser
```

--------------------------------

### TinyMCE 3.x File Browser Callback

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Add this line to your TinyMCE 3 init configuration to enable the file browser. Note the string format for the callback.

```javascript
file_browser_callback : 'elFinderBrowser'
```

--------------------------------

### Implement Custom elFinder Access Control

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Create a custom service class to define granular access permissions for files and folders within elFinder. This allows you to protect specific directories or hide dotfiles.

```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',
```

--------------------------------

### TinyMCE 4.x File Browser Callback

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Add this line to your TinyMCE 4 init configuration to enable the file browser.

```javascript
file_browser_callback : elFinderBrowser
```

--------------------------------

### Configure elFinder for Glide Integration

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Add the 'glideURL' to your elFinder configuration to enable Glide for image thumbnails and URLs. Optionally, add 'glideKey' for signature verification.

```php
'disks' => [
    'public' => [
        'glideURL' => '/glide',
    ],
],

```

--------------------------------

### Configure Laravel elFinder

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Customize elFinder settings in `config/elfinder.php`. This includes storage directories, filesystem disks, route configurations, access control callbacks, and elFinder connector options.

```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' => [],
];
```

--------------------------------

### Configure Laravel Filesystem Disk for Glide

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Define a 'public' disk in your Laravel filesystem configuration to be used with Glide for image processing.

```php
'public' => [
    'driver' => 'local',
    'root'   => base_path().'/public',
],

```

--------------------------------

### TinyMCE 3.x Route

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Use this route for TinyMCE 3 integration. The default path is '/elfinder/tinymce'.

```php
route('elfinder.tinymce');
```

--------------------------------

### Input Field for File Selection

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Define an input field with a unique ID that will be populated with the selected file's path. This ID is used by the popup selector.

```html
<label for="feature_image">Feature Image</label>
<input type="text" id="feature_image" name="feature_image" value="">
```

--------------------------------

### TinyMCE 5.x Route

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Use this route for TinyMCE 5 integration. Ensure the route is correctly defined in your application.

```php
route('elfinder.tinymce5');
```

--------------------------------

### Customize elFinder Route Configuration

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Extend the default elFinder service provider to define custom routes, apply additional middleware, and manage the elFinder controller behavior. Register your custom provider in config/app.php.

```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,
],
```

--------------------------------

### TinyMCE 4.x Route

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Use this route for TinyMCE 4 integration. The default path is '/elfinder/tinymce4'.

```php
route('elfinder.tinymce4');
```

--------------------------------

### Include Elfinder Standalone Popup Script

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Place this script tag just before the closing </body> tag to enable the standalone popup functionality for Elfinder.

```html
<script type="text/javascript" src="/packages/barryvdh/elfinder/js/standalonepopup.min.js"></script>
```

--------------------------------

### Include jQuery Colorbox JavaScript

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Ensure jQuery is included first, then add this script for jQuery Colorbox functionality.

```html
<script type="text/javascript" src="/assets/js/jquery.colorbox-min.js"></script>
```

--------------------------------

### Laravel elFinder Routes

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Overview of routes automatically registered by the elFinder service provider. These routes handle the file manager interface, API connector, and integrations with editors like TinyMCE and CKEditor.

```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');
```

```html
<a href="{{ route('elfinder.index') }}">Open File Manager</a>
```

--------------------------------

### TinyMCE 4.x Integration with elFinder

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Set up TinyMCE 4.x to use elFinder as its file browser using the windowManager API. The elFinder URL should be an absolute path.

```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;
}
```

--------------------------------

### Elfinder CKeditor Route

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

This is the route used for CKeditor 4 integration. Ensure it's correctly defined.

```php
'elfinder.ckeditor'
```

--------------------------------

### TinyMCE 5.x Integration with elFinder

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Configure TinyMCE 5.x to use elFinder as its file picker via the URL dialog API and postMessage. Ensure elFinder is accessible at the specified URL.

```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();
            }
        }
    });
}
```

--------------------------------

### Trigger Elfinder Popup

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

Create a link or button with the class 'popup_selector' and a 'data-inputid' attribute matching the ID of the input field you want to populate. This element will trigger the Elfinder file manager popup.

```html
<a href="" class="popup_selector" data-inputid="feature_image">Select Image</a>
```

--------------------------------

### Elfinder Popup Controller Route

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

This route action is used to display the Elfinder popup selector. Adjust the controller path if necessary.

```php
'Barryvdh\Elfinder\ElfinderController@showPopup'
```

--------------------------------

### TinyMCE 5.x elFinder Browser Function

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

This JavaScript function handles the file selection process for TinyMCE 5. Customize 'elfinder_url' to your Elfinder path.

```javascript
function elFinderBrowser (callback, value, meta) {
    tinymce.activeEditor.windowManager.openUrl({
        title: 'File Manager',
        url: elfinder_url,
        /**
         * On message will be triggered by the child window
         * 
         * @param dialogApi
         * @param details
         * @see https://www.tiny.cloud/docs/ui-components/urldialog/#configurationoptions
         */
        onMessage: function (dialogApi, details) {
            if (details.mceAction === 'fileSelected') {
                const file = details.data.file;
                
                // Make file info
                const info = file.name;
                
                // Provide file and text for the link dialog
                if (meta.filetype === 'file') {
                    callback(file.url, {text: info, title: info});
                }
                
                // Provide image and alt text for the image dialog
                if (meta.filetype === 'image') {
                    callback(file.url, {alt: info});
                }
                
                // Provide alternative source and posted for the media dialog
                if (meta.filetype === 'media') {
                    callback(file.url);
                }
                
                dialogApi.close();
            }
        }
    });
}
```

--------------------------------

### Embed elFinder in Blade View

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Include elFinder in your Blade template by adding the necessary CSS and JavaScript files, and initializing the elFinder instance with your desired configuration.

```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>
```

--------------------------------

### TinyMCE 4.x elFinder Browser Function

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

This JavaScript function opens the elFinder popup for TinyMCE 4. Ensure the route points to the correct Elfinder path.

```javascript
function elFinderBrowser (field_name, url, type, win) {
  tinymce.activeEditor.windowManager.open({
    file: '<?= route('elfinder.tinymce4') ?>',// use an 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 with elFinder

Source: https://context7.com/barryvdh/laravel-elfinder/llms.txt

Configure CKEditor 4.x to use elFinder by setting the `filebrowserBrowseUrl` in its configuration. This automatically integrates elFinder for image and link browsing.

```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']
    ]
});
```

--------------------------------

### TinyMCE 3.x elFinder Browser Function

Source: https://github.com/barryvdh/laravel-elfinder/blob/master/readme.md

This JavaScript function opens the elFinder popup for TinyMCE 3. Ensure 'elfinder_url' is set correctly and consider the 'inline' and 'popup_css' options.

```javascript
function elFinderBrowser (field_name, url, type, win) {
  var elfinder_url = '/elfinder/tinymce';    // use an absolute path!
  tinyMCE.activeEditor.windowManager.open({
    file: elfinder_url,
    title: 'elFinder 2.0',
    width: 900,
    height: 450,
    resizable: 'yes',
    inline: 'yes',    // This parameter only has an effect if you use the inlinepopups plugin!
    popup_css: false, // Disable TinyMCE's default popup CSS
    close_previous: 'no'
  }, {
    window: win,
    input: field_name
  });
  return false;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.