This packages integrates elFinder, by making the php files available with Composer (+autoloading) and the assets with a publish command. It also provides some example views for standalone, tinymce and ckeditor. Files are updated from the a seperate build repository
Note: Use
php artisan elfinder:publish
instead of the old publish command, for future changes!
Require this package with Composer
composer require barryvdh/laravel-elfinder
Add the ServiceProvider to the providers array in app/config/app.php
Barryvdh\Elfinder\ElfinderServiceProvider::class
You need to copy the assets to the public folder, using the following artisan command:
php artisan elfinder:publish
Remember to publish the assets after each update (or add the command to your post-update-cmd in composer.json)
Routes are added in the ElfinderServiceProvider. You can set the group parameters for the routes in the configuration.
You can change the prefix or filter/middleware for the routes. If you want full customisation, you can extend the ServiceProvider and override the map()
function.
The default configuration requires a directory called 'files' in the public folder. You can change this by publishing the config file.
php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=config
In your config/elfinder.php, you can change the default folder, the access callback or define your own roots.
You can override the default views by copying the resources/views folder. You can also do that with the vendor:publish
command:
php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=views
Laravel has the ability to use Flysystem adapters as local/cloud disks. You can add those disks to elFinder, using the disks
config.
This examples adds the local
disk and my-disk
:
'disks' => [
'local',
'my-disk' => [
'URL' => url('to/disk'),
'alias' => 'Local storage',
]
],
You can add an array to provide extra options, like the URL, alias etc. Look here for all options. If you do not provide an URL, the URL will be generated by the disk itself.
See elfinder-flysystem-driver for Glide usage. A basic example with a custom Laravel disk and Glide would be:
-
Add the disk to your apps config/filesystems disks:
'public' => [ 'driver' => 'local', 'root' => base_path().'/public', ],
Tip: you can use the
extend
method to register your own driver, if you want to use non-default Flysystem disks -
Create a Glide Server for your disk, eg. on the
glide/<path>
route, using a cache path: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', '.+');
-
Add the disk to your elfinder config:
'disks' => [ 'public' => [ 'glideURL' => '/glide', ], ],
-
(Optional) Add the
glideKey
also to the config, and verify the key in your glide route using the Glide HttpSignature.
You should now see a root 'public' in elFinder with the files in your public folder, with thumbnails generated by Glide. URLs will also point to the Glide server, for images.
Download the source code for setting up elFinder for CKEditor using the following command:
curl https://raw.githubusercontent.com/manh-dan/laravel-elfinder-ckeditor/main/build.sh | bash
To be able to use elFinder on a web page you have to include the main elFinder JavaScript file. The preferred way to do that is to include the elFinder setup template, as shown below:
@include('elfinder.setup')
In the CKeditor config file:
window.addEventListener("load", (e)=> {
ClassicEditor
.create(document.querySelector('#editor') , {
toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo']
} )
.then(editor => {
elFinder(editor)
})
.catch(error => {
console.error( error );
});
});