Laravel Filemanager

Laravel Filemanager is a comprehensive file management solution for Laravel applications. Key capabilities include:

• File Management: Uploading, managing, and validating files.
• Image Processing: Cropping and resizing images.
• Storage: Integration with cloud storage via the Laravel filesystem.
• User Interface: Responsive design (RWD) that is fully customizable.
• Multi-user Modes:
  • Shared folders: A global directory where all users can manage files.
  • Private folders: Dedicated directories per user, restricted to the owner.
• Integration Options:
  • WYSIWYG editors (CKEditor, TinyMCE, Summernote).
  • Standalone upload buttons.
  • Iframe implementation.
• Categorization: Separates 'files' and 'images' into different directories.
• Localization: Supports a wide range of locales including en, es, fr, zh-CN, ar, and many others.

Multi-user mode allows you to separate user files into private folders and provide a shared folder for all users.

Private Folders

• allow_private_folder: Enables/disables private folders. Only the owner (the signed-in user) can manage files within their private folder.
• private_folder_name: The name/prefix for private folders. Defaults to the user ID.

Shared Folders

• allow_shared_folder: Enables/disables shared folders. All users can upload and manage files within these folders.
• shared_folder_name: The name of the shared folder. Defaults to "shares".

Customizing Folder Logic

To change how folder names or user fields are determined (e.g., using something other than the user ID), you must implement a custom ConfigHandler:

1. Run php artisan publish tag="lfm_handler".
2. Rewrite the userField function in App\Handler\ConfigHandler.
3. Set the private_folder_name or shared_folder_name config value to App\Handler\ConfigHandler::class.

For a cleaner implementation when handling many different events, use an Event Subscriber. Register the subscriber in the $subscribe array of your EventServiceProvider and use the $events->listen('*', ...) pattern to catch all filemanager events in a single class.

// In EventServiceProvider.php
protected $subscribe = [
    UploadListener::class
];

// The Subscriber implementation
class UploadListener
{
    public function subscribe($events)
    {
        $events->listen('*', UploadListener::class);
    }

    public function handle($event)
    {
        $method = 'on'.class_basename($event);
        if (method_exists($this, $method)) {
            call_user_func([$this, $method], $event);
        }
    }

    public function onImageWasUploaded(ImageWasUploaded $event)
    {
        $path = $event->path();
        // your code
    }

    public function onImageWasRenamed(ImageWasRenamed $event)
    {
        // image was renamed
    }

    public function onImageWasDeleted(ImageWasDeleted $event)
    {
        // image was deleted
    }

    public function onFolderWasRenamed(FolderWasRenamed $event)
    {
        // folder was renamed
    }
}

To integrate CKEditor, configure the filebrowser and upload URLs in your CKEditor options. Use the /laravel-filemanager route with the appropriate type parameter (Images or Files). Ensure you include the CSRF token for upload requests.

Configuration Keys:

• filebrowserImageBrowseUrl: URL for browsing images.
• filebrowserImageUploadUrl: URL for uploading images.
• filebrowserBrowseUrl: URL for browsing files.
• filebrowserUploadUrl: URL for uploading files.

<textarea id="my-editor-1" name="content" class="form-control my-editor">{!! old('content', 'test editor content') !!}</textarea>
<script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
<script>
  var options = {
    filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
    filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
    filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
    filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
  };
</script>

<script>
CKEDITOR.replace('my-editor-1', options);
</script>

To use Laravel Filemanager with Summernote, you must define a custom button (e.g., lfm) and add it to the Summernote toolbar. The custom button triggers a function that opens the Filemanager window and uses a callback (window.SetUrl) to receive the selected items and insert them into the editor via context.invoke('insertImage', url).

// Inside $(document).ready()
var lfm = function(options, cb) {
  var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
  window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
  window.SetUrl = cb;
};

var LFMButton = function(context) {
  var ui = $.summernote.ui;
  var button = ui.button({
    contents: '<i class="note-icon-picture"></i> ',
    tooltip: 'Insert image with filemanager',
    click: function() {
      lfm({type: 'image', prefix: '/laravel-filemanager'}, function(lfmItems, path) {
        lfmItems.forEach(function (lfmItem) {
          context.invoke('insertImage', lfmItem.url);
        });
      });
    }
  });
  return button.render();
};

$('#summernote-editor').summernote({
  toolbar: [['popovers', ['lfm']]],
  buttons: { lfm: LFMButton }
});