Laravel File Manager

https://unisharp.github.io/laravel-filemanager/
Admin
Laravel File Manager is a file upload and management package for Laravel applications with support...
Tokens:6,626
Snippets:71
Trust Score:9.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Clone Example Project and Install File Manager

Source: https://unisharp.github.io/laravel-filemanager/contribution

Clone the example project, navigate into its directory, require the file manager package as a development dependency, and initialize the project.

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

Source: https://unisharp.github.io/laravel-filemanager/installation

Install the latest developer version of the package using Composer. This is useful for testing upcoming features or reporting bugs.

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

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

### Install Laravel File Manager

Source: https://unisharp.github.io/laravel-filemanager/installation

Install the package using Composer. This is the primary step for adding the file manager to your Laravel project.

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

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

### Install Intervention Image Laravel (Optional)

Source: https://unisharp.github.io/laravel-filemanager/installation

Optionally install the 'intervention/image-laravel' package for image manipulation features like cropping and thumbnail generation. This is required if you are using v3.* of Intervention Image.

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

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

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

### CKEditor Basic Integration

Source: https://unisharp.github.io/laravel-filemanager/integration

Basic CKEditor setup with file browser and upload URLs configured for Laravel File Manager. Replace 'my-editor-1' with your textarea's ID.

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

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

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

### Standalone Button Setup for File Manager

Source: https://unisharp.github.io/laravel-filemanager/integration

Sets up a standalone button to trigger the Laravel File Manager for selecting files or images. This is useful for directly setting input field values.

```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
$"#lfm").filemanager('image');
```

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

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

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

### Publish Configuration and Public Assets

Source: https://unisharp.github.io/laravel-filemanager/installation

Publish the package's configuration file and public assets. This makes the configuration accessible for customization and makes assets like CSS and JS available.

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

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

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

### Create Storage Symbolic Link

Source: https://unisharp.github.io/laravel-filemanager/installation

Create a symbolic link from 'public/storage' to 'storage/app/public'. This is necessary for serving files uploaded through the file manager.

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

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

### Run Composer Update and Publish Assets

Source: https://unisharp.github.io/laravel-filemanager/upgrade

Execute these commands to update the package and re-publish its assets and configuration. Ensure you clear routes and configuration caches afterward.

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

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

### Map File Extensions to Descriptions

Source: https://unisharp.github.io/laravel-filemanager/config

Provide a mapping of file extensions to their human-readable descriptions. This is used to display meaningful information about different file types.

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

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

### Registering a Listener for ImageWasUploaded Event

Source: https://unisharp.github.io/laravel-filemanager/events

Add a listener to your `EventServiceProvider` to react to the `ImageWasUploaded` event. The `UploadListener` class will handle the event logic.

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

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

### Registering an Event Subscriber in EventServiceProvider

Source: https://unisharp.github.io/laravel-filemanager/events

Configure your `EventServiceProvider` to subscribe to events using the `UploadListener` class. This allows a single class to handle multiple events.

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

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

### Folder Categories Configuration

Source: https://unisharp.github.io/laravel-filemanager/config

Defines 'file' and 'image' folder categories with specific settings for folder name, startup view, max file size, and allowed MIME types. This configuration determines how uploaded files are organized and validated.

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

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

### Pagination Configuration

Source: https://unisharp.github.io/laravel-filemanager/config

Sets the number of items to display per page in the file manager's paginator. This controls how many files or folders are shown before pagination is applied.

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

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

### Publish Laravel Filemanager Views

Source: https://unisharp.github.io/laravel-filemanager/customization

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

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

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

### Publish Laravel Filemanager Translations

Source: https://unisharp.github.io/laravel-filemanager/customization

Use the `php artisan vendor:publish` command with the `lfm_lang` tag to publish the package's translation files. Copy the default `en` language files to your desired language directory for customization.

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

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

### Clear Route and Config Cache (Optional)

Source: https://unisharp.github.io/laravel-filemanager/installation

Clear the route and configuration caches. This can be helpful after publishing new configurations or routes to ensure changes are reflected.

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

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

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

### Set Thumbnail Image Dimensions

Source: https://unisharp.github.io/laravel-filemanager/config

Define the width and height in pixels for automatically generated thumbnail images. These settings control the size of the preview images.

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

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

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

### UploadListener Class as an Event Subscriber

Source: https://unisharp.github.io/laravel-filemanager/events

This `UploadListener` class implements the event subscriber pattern. It registers listeners for various events, including image renaming, image deletion, and folder renaming, within its `subscribe` method.

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

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

### Configure Raster Image Mime Types for Thumbnails

Source: https://unisharp.github.io/laravel-filemanager/config

Specify the MIME types of raster images for which thumbnails should be automatically generated. This helps in controlling which image formats trigger thumbnail creation.

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

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

### Define Laravel Filemanager Routes

Source: https://unisharp.github.io/laravel-filemanager/customization

Wrap the package routes within a route group in `routes/web.php`. Ensure the `auth` middleware is included for security and multi-user functionality.

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

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

### UploadListener Class for Handling ImageWasUploaded Event

Source: https://unisharp.github.io/laravel-filemanager/events

This class contains the `handle` method to dispatch to specific event handler methods based on the event's class name. The `onImageWasUploaded` method processes the uploaded image event.

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

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

### Summernote Integration with Laravel File Manager

Source: https://unisharp.github.io/laravel-filemanager/integration

Integrates the Laravel File Manager as a button within the Summernote rich text editor. Requires Bootstrap, jQuery, and Summernote dependencies. The LFM button allows users to insert images directly into the editor.

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

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

### Configure TinyMCE File Browser URLs

Source: https://unisharp.github.io/laravel-filemanager/customization

Construct the `cmsURL` for TinyMCE, appending the `field_name`, `lang`, and `type` parameters (Images or Files) to your custom route.

```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 CKEditor File Browser URLs

Source: https://unisharp.github.io/laravel-filemanager/customization

Set the `filebrowserImageBrowseUrl` and `filebrowserBrowseUrl` in CKEditor configuration to point to your custom route, including the `type` parameter for Images or Files.

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

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

### Dynamically Trigger File Manager Popup with JavaScript

Source: https://unisharp.github.io/laravel-filemanager/integration

This JavaScript function allows you to open the file manager popup dynamically from your application. It handles button clicks, setting input values, and previewing selected files or images. No jQuery is required.

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

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

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

### Override php.ini Settings for File Uploads

Source: https://unisharp.github.io/laravel-filemanager/config

Specify custom values for php.ini settings that affect file uploads, such as memory limits. Note that settings like upload_max_filesize and post_max_size cannot be overridden due to the timing of their application.

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

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

### TinyMCE5 Integration

Source: https://unisharp.github.io/laravel-filemanager/integration

Integrates TinyMCE version 5 with Laravel File Manager. This configuration includes custom file picker callback for image and file browsing/uploading.

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

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

### TinyMCE4 Integration

Source: https://unisharp.github.io/laravel-filemanager/integration

Integrates TinyMCE version 4 with Laravel File Manager. This configuration uses a file browser callback for selecting images and files.

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

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

### CKEditor jQuery Integration

Source: https://unisharp.github.io/laravel-filemanager/integration

Integrates CKEditor with Laravel File Manager using a jQuery selector. Ensure jQuery and the CKEditor jQuery adapter are included.

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

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

### Protecting Routes with Auth Middleware

Source: https://unisharp.github.io/laravel-filemanager/security

Wrap your Laravel Filemanager routes within an 'auth' middleware group to restrict access to logged-in users. Ensure the 'auth' middleware is correctly configured in your application.

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

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

### Embed File Manager using Iframe

Source: https://unisharp.github.io/laravel-filemanager/integration

Embed the Laravel File Manager directly into your web page by using an iframe. This method provides a straightforward way to display the file manager within your existing layout.

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