Laravel Simple Filemanager

Laravel Simple Filemanager is a Laravel package for managing images, files in one place with very easy way. Filemanager or media manager is essential for managing the website or web application's file, images. You can easily install & setup Laravel Simple Filemanager package in your Laravel project. It supports various WYSIWYG HTML editor laravel CKEditor, laravel TinyMCE, laravel summernote and more.

Features

• Multi-Language support (English, বাংলা, हिन्दी, العربية, German, Indonesian, 日本語).
• Clean & fresh responsive UI.
• Easy to install.
• Configurable middleware.
• Configurable route.
• TinyMce 4, TinyMCE 5, CKEditor, Summernote support.
• Drag and drop file upload.
• Single/Multiple file upload.
• Single file selection.
• Batch file selection.
• Convert image format.
• Batch file delete.
• File rename.
• Quick file search.
• File download.
• Event listener.
• and more

Licence

Laravel Simple Filemanager offers two types of licence. You can choose one of the licences depending on your project needs.

Commercial license

If you want to use it to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. To purchase a commercial license you need to buy a licence from the owner. Contact for a licence.

• $50 - 1 Developer
• $150 - Team (Upto 8 developers)
• $350 - Organization (Unlimited Developers)

Open-source license

Free for personal blog and non-commercial usages. If you are creating an open-source application then use it by following the CC BY-NC 4.0 licence rules.

File Manager install & setup

1. Install the filemanger package.
2. Run the install command.
3. Add scripts.

1 Install the filemanger package

composer require haruncpi/laravel-simple-filemanager

Keep the internet connection during installation. I'll take some time depending your internet connection speed.

2 Run the install command

Add your database details in .env file and run the artisan command given below.

php artisan filemanager:install

After running this, it will publish assets, config, migration and run the migration file. You can change the filemanager configuration from config/filemanager.php file.

3 Add scripts

Add the blade directive given below before closing </head> tag.

@FilemanagerScript
</head>

Done! the installation process is finished!

Filemanager configuration

Here is a default configuration file for Laravel Simple Filemanager. Which you'll find in config/filemanager.php.

<?php
return [
    'base_route'      => 'admin/filemanager',
    'middleware'      => ['web', 'auth'],
    'allow_format'    => 'jpeg,jpg,png,gif,webp',
    'max_size'        => 500,
    'max_image_width' => 1024,
    'image_quality'   => 80,
];

You can change the value whatever you need. The max_size value is in KB and max_image_width value in pixel and image_quality value in percentage.

Laravel TinyMce Configuration

Integrate TinyMce with Laravel Simple Filemanager is very easy! You just need to set the filemanager.tinyMceCallback in your TinyMCE file_browser_callback. An example is given below.

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
    window.onload = function () {

        tinymce.init({
            selector: '#tinymce',
            height: 200,
            plugins: 'image',
            toolbar: 'bold italic underline | image',
            branding: false,
            file_browser_callback: filemanager.tinyMceCallback
        });

    };
</script>
    
<textarea id="tinymce"></textarea>

Note: For TinyMCE 5 version just use the file_picker_callback instead of file_browser_callback.

file_picker_callback: filemanager.tinyMceCallback,

Laravel CKEditor Configuration

For integrating CKEditor with Laravel Simple Filemanager, just set the filemanager.ckBrowseUrl in filebrowserBrowseUrl. Here an example is given below.

<script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
	window.onload = function () {
		CKEDITOR.replace('ckeditor', {
	        filebrowserBrowseUrl: filemanager.ckBrowseUrl,
	    });
	}
</script>

<textarea id="ck"></textarea>

Laravel Summernote Configuration

Integrate Summernote WYSIWYG with Simple Laravel Filemanager just adds the button for picking the file from filemanager window.

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote.min.js"></script>

<script>
window.onload = function () {
    var editor = $('.summernote');
    editor.summernote({
        height: ($(window).height() - 300),
        focus: true,
        buttons: {
            filemanager: filemanager.btnSummernote
        },
        toolbar: [
            ['style', ['bold', 'italic', 'underline']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['fontsize', ['fontsize']],
            ['custom', ['picture', 'filemanager']]
        ],
    });

    window.addEventListener('filemanager.select', function (e) {
        var data = e.detail.data;
        $(data.note).summernote('editor.insertImage', data.absolute_url)
    })
}
</script>

<div class="summernote"></div>

Single File Picker

Sometimes we need to pick a file URL into our input textbox. To pick a file URL in a textbox, Use the filemanager.selectFile function by passing the input id. Here is an example.

<input type="text" id="profile-photo">
<button onclick="filemanager.selectFile('profile-photo')">Choose</button>

If you pick an image file and want to preview the image after selecting the image then the Laravel Simple Filemanager will do it automatically. Just add an image tag with id following the rule input-id-preview. For example, here we are picking the image for profile-photo input id. If we want to preview the image then we have to add an image with id like profile-photo-preview.

<input type="text" id="profile-photo">
<img src="" id="profile-photo-preview">
<button onclick="filemanager.selectFile('profile-photo')">Choose</button>

Bulk File Picker

To pick multiple file use the filemanager.bulkSelectFile function by passing a callback function. After the selection, you will get the JSON data into your callback function. Here an example is given below.

Define your callback.

window.myBulkSelectCallback = function (data) {
  // the JSON data will come here
  console.log(data)
};

Add the button for bulk file selection.

<button onclick="filemanager.bulkSelectFile('myBulkSelectCallback')">Choose Images</button>

Event Listeners

You can listen to the event and get the data during single and multiple file selection.

For single file selection.

window.addEventListener('filemanager.select', function (e) {
    // single object
    console.log(e.detail);
});

For multiple file selection.

window.addEventListener('filemanager.bulkselect', function (e) {
    // object Array
    console.log(e.detail);
});