### Clone Example Project and Install Dependency

Source: https://github.com/unisharp/laravel-filemanager/blob/master/CONTRIBUTING.md

Clone the example project, navigate into its directory, and install the laravel-filemanager package as a development dependency.

```bash
git clone git@github.com:UniSharp/laravel-filemanager-example-5.3.git
cd laravel-filemanager-example-5.3
composer require unisharp/laravel-filemanager:dev-master
make init
```

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

### Install MBString and Common PHP Packages (Ubuntu)

Source: https://github.com/unisharp/laravel-filemanager/wiki/Enabling-exif-extension-for-PHP.

If exif.so and mbstring.so are not found on Ubuntu, install them using apt-get. This command installs the mbstring extension and common PHP packages.

```bash
sudo apt-get install php7.0-mbstring && sudo apt-get install php7.0-common
```

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

### Install Alpha Version

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/installation.md

To install the latest developer version (alpha), use the 'dev-master' branch with Composer.

```bash
composer require unisharp/laravel-filemanager:dev-master
```

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

### List Installed PHP Extensions (Ubuntu)

Source: https://github.com/unisharp/laravel-filemanager/wiki/Enabling-exif-extension-for-PHP.

On Ubuntu, use this command to list all installed PHP extensions in your system's extension directory. Verify the presence of exif.so and mbstring.so.

```bash
ls `php -i | grep "^extension_dir" | sed -e 's/.*=> //'`
```

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

### Initialize File Manager Instances

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

Example of how to call the `lfm` function to initialize the file manager for image and file types. Specify the desired route prefix for your file manager instance.

```javascript
var route_prefix = "url-to-filemanager";
lfm('lfm', 'image', {prefix: route_prefix});
lfm('lfm2', 'file', {prefix: route_prefix});
```

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

### Install Laravel Filemanager via Composer

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/installation.md

Use Composer to add the Laravel Filemanager package to your project. This is the primary installation step.

```bash
composer require unisharp/laravel-filemanager
```

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

### Implementing an Event Listener Class

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/events.md

This is an example of an event listener class that handles the ImageWasUploaded event. It dynamically calls a method based on the event's class name.

```php
class UploadListener
{
    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, for example resizing and cropping
    }
}
```

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

### Install Intervention Image Laravel Package

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/installation.md

Optionally install the intervention/image-laravel package if you are using v3.* of intervention/image and need its service provider for image manipulation features.

```bash
composer require intervention/image-laravel
```

```bash
php artisan vendor:publish --provider="Intervention\Image\Laravel\ServiceProvider"
```

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

### Implementing an Event Subscriber Class

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/events.md

An example of an event subscriber class that handles multiple events, including image and folder renaming and deletion. It uses a subscribe method to register listeners for various events.

```php
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, for example resizing and cropping
}

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

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

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

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

### Clear Route and Config Cache

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/installation.md

Clear the route and configuration caches to ensure that any changes made during the installation process are recognized by the application.

```bash
php artisan route:clear
```

```bash
php artisan config:clear
```

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

### TinyMCE5 Integration

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

Integrate TinyMCE version 5 with the Laravel File Manager. This setup includes configuration for file and image browsing/uploading through the file manager.

```html
<script src="/path-to-your-tinymce/tinymce.min.js"></script>
<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
<script>
  var editor_config = {
    path_absolute : "/",
    selector: 'textarea.my-editor',
    relative_urls: false,
    plugins: [
      "advlist autolink lists link image charmap print preview hr anchor pagebreak",
      "searchreplace wordcount visualblocks visualchars code fullscreen",
      "insertdatetime media nonbreaking save table directionality",
      "emoticons template paste textpattern"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
    file_picker_callback : function(callback, value, meta) {
      var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
      var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

      var cmsURL = editor_config.path_absolute + 'laravel-filemanager?editor=' + meta.fieldname;
      if (meta.filetype == 'image') {
        cmsURL = cmsURL + "&type=Images";
      } else {
        cmsURL = cmsURL + "&type=Files";
      }

      tinyMCE.activeEditor.windowManager.openUrl({
        url : cmsURL,
        title : 'Filemanager',
        width : x * 0.8,
        height : y * 0.8,
        resizable : "yes",
        close_previous : "no",
        onMessage: (api, message) => {
          callback(message.content);
        }
      });
    }
  };

  tinymce.init(editor_config);
</script>
```

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

### Run Composer Update and Artisan Commands

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/upgrade.md

Execute these commands to update the package and republish necessary assets and configuration files. Clear routes and configuration caches afterwards.

```bash
composer update unisharp/laravel-filemanager

php artisan vendor:publish --tag=lfm_view --force
php artisan vendor:publish --tag=lfm_public --force
php artisan vendor:publish --tag=lfm_config --force

php artisan route:clear
php artisan config:clear
```

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

### Create Storage Symlink

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/installation.md

Create a symbolic link for the storage directory. This is essential for the file manager to access and store files correctly.

```bash
php artisan storage:link
```

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

### Publish Configuration and Public Assets

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/installation.md

Publish the package's configuration file and public assets using Artisan. This makes the configuration accessible for customization and makes assets available.

```bash
php artisan vendor:publish --tag=lfm_config
```

```bash
php artisan vendor:publish --tag=lfm_public
```

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

### Integrate with TinyMCE

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/customization.md

Set up TinyMCE to work with the file manager by constructing the `cmsURL`. Dynamically append the `type` parameter ('Images' or 'Files') based on the editor's context.

```javascript
... 
var cmsURL = editor_config.path_absolute + 'your-custom-route?field_name='+field_name+'&lang='+ tinymce.settings.language;
if (type == 'image') {
  cmsURL = cmsURL + "&type=Images";
} else {
  cmsURL = cmsURL + "&type=Files";
}
...
```

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

### Configure Routes for Laravel File Manager

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/customization.md

Wrap package routes within a group in `routes/web.php`, including 'web' and 'auth' middleware for security and multi-user support. Ensure the route corresponds to your configuration, remembering to include the `type` parameter.

```php
Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () {
    \UniSharp\LaravelFilemanager\Lfm::routes();
});
```

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

### Pagination Configuration

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/config.md

Sets the number of items to display per page for pagination within the file manager.

```php
'paginator' => [
    'perPage' => 30,
]
```

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

### JavaScript for Lightbox Initialization

Source: https://github.com/unisharp/laravel-filemanager/wiki/Lightbox-integration-(including-function-of-delete-photos)

This JavaScript code initializes the Lightbox functionality. It's typically placed in your main JavaScript file or included where Lightbox is used.

```javascript
lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    });
```

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

### Folder Categories Configuration

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/config.md

Defines different categories for organizing uploaded files, including folder names, startup views, maximum file sizes, and allowed MIME types.

```php
'folder_categories' => [
    'file'  => [
        'folder_name'  => 'files',
        'startup_view' => 'list',
        'max_size'     => 50000, // size in KB
        'valid_mime'   => [
            'image/jpeg',
            'image/pjpeg',
            'image/png',
            'image/gif',
            'application/pdf',
            'text/plain',
        ],
    ],
    'image' => [
        'folder_name'  => 'photos',
        'startup_view' => 'grid',
        'max_size'     => 50000, // size in KB
        'valid_mime'   => [
            'image/jpeg',
            'image/pjpeg',
            'image/png',
            'image/gif',
        ],
    ],
]
```

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

### Uncomment EXIF and MBString Extensions in php.ini (Windows)

Source: https://github.com/unisharp/laravel-filemanager/wiki/Enabling-exif-extension-for-PHP.

On Windows, edit your php.ini file to uncomment the lines for php_mbstring.dll and php_exif.dll. Ensure mbstring is loaded before exif as it is a dependency.

```ini
extension=php_mbstring.dll
extension=php_exif.dll
```

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

### Define File Type Descriptions

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/config.md

Map file extensions to their corresponding descriptions. This is used to provide user-friendly names for different file types within the file manager.

```php
'file_type_array' => [
    'pdf'  => 'Adobe Acrobat',
    'doc'  => 'Microsoft Word',
    'docx' => 'Microsoft Word',
    'xls'  => 'Microsoft Excel',
    'xlsx' => 'Microsoft Excel',
    'zip'  => 'Archive',
    'gif'  => 'GIF Image',
    'jpg'  => 'JPEG Image',
    'jpeg' => 'JPEG Image',
    'png'  => 'PNG Image',
    'ppt'  => 'Microsoft PowerPoint',
    'pptx' => 'Microsoft PowerPoint',
]
```

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

### Publish Laravel File Manager Views

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/customization.md

Use the `vendor:publish` Artisan command with the `lfm_view` tag to publish the package's views. These views can then be edited in `/resources/views/vendor/laravel-filemanager`.

```bash
php artisan vendor:publish --tag=lfm_view
```

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

### Configure Raster Image Mimetypes

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/config.md

Specify the MIME types of raster images for which thumbnails should be automatically created. This helps in controlling which image formats are processed for thumbnail generation.

```php
'raster_mimetypes' => [
    'image/jpeg',
    'image/pjpeg',
    'image/png',
]
```

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

### CKEditor Basic Integration

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

Integrate CKEditor with the Laravel File Manager by replacing a textarea by its ID. Ensure the CKEditor library and necessary options are included.

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

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

### Standalone File/Image Selector Button

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

Sets up a button to open the file manager for selecting files or images, updating a specified input field and image preview. Requires jQuery and the stand-alone-button.js script.

```html
<div class="input-group">
  <span class="input-group-btn">
    <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
      <i class="fa fa-picture-o"></i> Choose
    </a>
  </span>
  <input id="thumbnail" class="form-control" type="text" name="filepath">
</div>
<div id="holder" style="margin-top:15px;max-height:100px;"></div>
```

```html
<script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>
```

```javascript
var route_prefix = "url-to-filemanager";
$('#lfm').filemanager('image', {prefix: route_prefix});
```

```javascript
 $('#lfm').filemanager('image');
```

```javascript
 $('#lfm').filemanager('file');
```

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

### Debug PHP Upload Limits

Source: https://github.com/unisharp/laravel-filemanager/wiki/Home

Use this snippet to check the current `post_max_size` and `upload_max_filesize` values in your php.ini configuration. Ensure these are set appropriately for large file uploads.

```php
dd(ini_get('post_max_size'), ini_get('upload_max_filesize'));
```

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

### Override PHP.ini Settings

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/config.md

Specify custom values for certain PHP.ini settings that will be applied before file uploads. Note that settings like upload_max_filesize and post_max_size cannot be overridden this way.

```php
'php_ini_overrides' => [
    'memory_limit' => '256M',
]
```

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

### Publish Laravel File Manager Translations

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/customization.md

Publish translation files using the `vendor:publish` Artisan command with the `lfm_lang` tag. Copy the default English translations to your desired language directory and edit them as needed.

```bash
php artisan vendor:publish --tag=lfm_lang
```

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

### Summernote Integration with Laravel File Manager

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

Integrates the Laravel File Manager into the Summernote editor to allow easy insertion of images. Requires Bootstrap, jQuery, and Summernote dependencies.

```html
<!-- dependencies (Summernote depends on Bootstrap & jQuery) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js"></script>

<!-- markup -->
<textarea id="summernote-editor" name="content">{!! old('content', $content) !!}</textarea>

<!-- summernote config -->
<script>
  $(document).ready(function(){

    // Define function to open filemanager window
    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;
    };

    // Define LFM summernote button
    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();
    };

    // Initialize summernote with LFM button in the popover button group
    // Please note that you can add this button to any other button group you'd like
    $('#summernote-editor').summernote({
      toolbar: [
        ['popovers', ['lfm']],
      ],
      buttons: {
        lfm: LFMButton
      }
    })
  });
</script>
```

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

### Integrate with CKEditor

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/customization.md

Configure CKEditor to use the file browser by specifying the `filebrowserImageBrowseUrl` and `filebrowserBrowseUrl` options. Remember to include the `type` parameter in your custom route.

```javascript
CKEDITOR.replace('editor', {
  filebrowserImageBrowseUrl: '/your-custom-route?type=Images',
  filebrowserBrowseUrl: '/your-custom-route?type=Files'
});
```

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

### ImageWasUploaded Event Listener for Watermarking

Source: https://github.com/unisharp/laravel-filemanager/wiki/Inserting-watermark-with-event-listeners.

This listener handles the ImageWasUploaded event to apply a watermark to the uploaded image. It uses the Intervention Image facade to open, modify, and save the image. Ensure the watermark image ('public/watermark.png') exists and is accessible.

```php
class HasUploadedImageListener
{
    /**
     * Handle the event.
     *
     * @param  ImageWasUploaded  $event
     * @return void
     */
    public function handle(ImageWasUploaded $event)
    {
        // Grab the uploaded file's path
        $imagePath = $event->path();

        // Open the image file
        $img = Image::make($imagePath);

        // Insert the watermark
        $img->insert('public/watermark.png');

        // Save the image
        $img->save($imagePath);
    }
}
```

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

### Define Laravel Filemanager Routes

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/installation.md

Define the routes for the Laravel Filemanager within your `routes/web.php` file. This includes wrapping them in a group with 'web' and 'auth' middleware for security and proper functionality.

```php
Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () {
    			    \UniSharp\LaravelFilemanager\Lfm::routes();
    			});
```

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

### Dynamically Trigger File Manager Popup with JavaScript

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

This JavaScript function allows you to open the file manager popup from your application. It handles button clicks, setting input values, and previewing selected files or images. Ensure the 'FileManager' window is accessible.

```javascript
var lfm = function(id, type, options) {
  let button = document.getElementById(id);

  button.addEventListener('click', function () {
    var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
    var target_input = document.getElementById(button.getAttribute('data-input'));
    var target_preview = document.getElementById(button.getAttribute('data-preview'));

    window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
    window.SetUrl = function (items) {
      var file_path = items.map(function (item) {
        return item.url;
      }).join(',');

      // set the value of the desired input to image url
      target_input.value = file_path;
      target_input.dispatchEvent(new Event('change'));

      // clear previous preview
      target_preview.innerHtml = '';

      // set or change the preview image src
      items.forEach(function (item) {
        let img = document.createElement('img')
        img.setAttribute('style', 'height: 5rem')
        img.setAttribute('src', item.thumb_url)
        target_preview.appendChild(img);
      });

      // trigger change event
      target_preview.dispatchEvent(new Event('change'));
    };
  });
};
```

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

### Registering an Event Listener in EventServiceProvider

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/events.md

Use this snippet to register a listener for a specific event in your application's EventServiceProvider. The listener class will be invoked when the specified event is dispatched.

```php
protected $listen = [
    ImageWasUploaded::class => [
        UploadListener::class,
    ],
];
```

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

### Loop and Assign Delete Button/Lightbox Attribute

Source: https://github.com/unisharp/laravel-filemanager/wiki/Lightbox-integration-(including-function-of-delete-photos)

This loop iterates through input values, assigning a delete button and the 'data-lightbox' attribute to images if the value is not empty. This dynamically manages image display and deletion.

```blade
<% foreach ($images as $img) { %>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <div class="img-thumbnail">
            <div class="image_container">
                <a class="img-responsive" target="_blank" href="<%$img->path()%>" data-lightbox="<%$img->path()%>">
                    <img src="<%$img->path()%>" alt="">
                </a>
            </div>
            <div class="caption text-center">
                <div class="btn-group">
                    <% if ($lfm->type('images')->hasFiles($img)) { %>
                        <a class="btn btn-danger delete" data-id="<%$img->path()%>" href="#"><i class="fa fa-trash"></i></a>
                    <% } %>
                    <a class="btn btn-primary" href="<%$img->path()%>" data-lightbox="<%$img->path()%>" data-title="<%$img->name()%>" data-alt="<%$img->name()%>">
                        <i class="fa fa-search-plus"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
<% } %>
```

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

### Registering an Event Subscriber in EventServiceProvider

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/events.md

This snippet shows how to register an event subscriber in your application's EventServiceProvider. Subscribers allow you to register multiple event handlers within a single class.

```php
protected $subscribe = [
    UploadListener::class
];
```

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

### Set Thumbnail Image Width

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/config.md

Define the width in pixels for generated thumbnail images. This setting controls the horizontal dimension of the thumbnails.

```php
'thumb_img_width' => 200
```

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

### Set Thumbnail Image Height

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/config.md

Define the height in pixels for generated thumbnail images. This setting controls the vertical dimension of the thumbnails.

```php
'thumb_img_height' => 200
```

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

### TinyMCE4 Integration

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

Integrate TinyMCE version 4 with the Laravel File Manager. This configuration enables file and image selection via the file manager, using a specific callback for file browser integration.

```html
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
<script>
  var editor_config = {
    path_absolute : "/",
    selector: "textarea.my-editor",
    plugins: [
      "advlist autolink lists link image charmap print preview hr anchor pagebreak",
      "searchreplace wordcount visualblocks visualchars code fullscreen",
      "insertdatetime media nonbreaking save table contextmenu directionality",
      "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
    relative_urls: false,
    file_browser_callback : function(field_name, url, type, win) {
      var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
      var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

      var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
      if (type == 'image') {
        cmsURL = cmsURL + "&type=Images";
      } else {
        cmsURL = cmsURL + "&type=Files";
      }

      tinyMCE.activeEditor.windowManager.open({
        file : cmsURL,
        title : 'Filemanager',
        width : x * 0.8,
        height : y * 0.8,
        resizable : "yes",
        close_previous : "no"
      });
    }
  };

  tinymce.init(editor_config);
</script>
```

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

### Add Lightbox Attribute for Image Links

Source: https://github.com/unisharp/laravel-filemanager/wiki/Lightbox-integration-(including-function-of-delete-photos)

This line adds the 'data-lightbox' attribute to image links, enabling integration with the Lightbox2 library for enhanced image viewing. Ensure Lightbox2 is properly included in your project.

```blade
<a href="<%$file->path()%>" data-lightbox="<%$file->path()%>" class="img-responsive" target="_blank"><img src="<%$file->path()%>" alt=""></a>
```

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

### Protecting Routes with Auth Middleware

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/security.md

Wrap your Laravel Filemanager routes within an 'auth' middleware group to ensure only logged-in users can access them. This is crucial for preventing unauthorized uploads.

```php
Route::group(['middleware' => 'auth'], function () {
    \UniSharp\LaravelFilemanager\Lfm::routes();
});
```

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

### JavaScript for Photo Deletion Logic

Source: https://github.com/unisharp/laravel-filemanager/wiki/Lightbox-integration-(including-function-of-delete-photos)

This JavaScript code handles the logic for deleting a photo. It listens for click events on delete buttons and sends an AJAX request to the server to remove the specified file.

```javascript
function delete_photo(id){
    var id_arr = [];
    id_arr.push(id);
    $.ajax({
        url: "<%$url_delete_photo%>",
        method: "POST",
        data: {id: id_arr},
        success: function (data) {
            if (data.status == "success") {
                alert(data.msg);
                $("a[data-id=\""+id+"\"]").parents(".col-md-3").remove();
            } else {
                alert(data.msg);
            }
        }
    });
}

$(".delete").on('click', function() {
    var id = $(this).data('id');
    delete_photo(id);
});
```

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

### Display Delete Button for Product Photos

Source: https://github.com/unisharp/laravel-filemanager/wiki/Lightbox-integration-(including-function-of-delete-photos)

This code snippet is responsible for displaying a delete button when adding photos for a product. It's the initial step in managing product images.

```blade
<% if ($lfm->type('images')->hasFiles($file)) { %>
    <a class="btn btn-danger delete" data-id="<%$file->path()%>" href="#"><i class="fa fa-trash"></i></a>
<% } %>
```

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

### Embed File Manager using Iframe

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

This HTML snippet shows how to embed the Laravel File Manager directly into your web page using an iframe. Adjust the style attributes for desired dimensions and overflow behavior.

```html
<iframe src="/laravel-filemanager" style="width: 100%; height: 500px; overflow: hidden; border: none;"></iframe>
```

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

### CKEditor Integration by ID

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

Replace a textarea element with CKEditor using its ID. This method requires the CKEditor library and pre-defined options.

```javascript
CKEDITOR.replace('my-editor-1', options);
```

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

### CKEditor Integration with jQuery

Source: https://github.com/unisharp/laravel-filemanager/blob/master/docs/integration.md

Integrate CKEditor using jQuery selectors. This approach requires the jQuery library and the CKEditor jQuery adapter. It allows for more flexible element selection.

```javascript
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
  <script>
  $('textarea.my-editor').ckeditor(options);
  </script>
```

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