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.
Laravel Simple Filemanager offers two types of licence. You can choose one of the licences depending on your project needs.
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.
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.
composer require haruncpi/laravel-simple-filemanagerKeep the internet connection during installation. I'll take some time depending your internet connection speed.
Add your database details in .env file and run the artisan command given below.
php artisan filemanager:installAfter running this, it will publish assets, config, migration and run the migration file. You can change the filemanager configuration from config/filemanager.php file.
Add the blade directive given below before closing </head> tag.
@FilemanagerScript
</head>Done! the installation process is finished!
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.
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,
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>
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>
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>
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>
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);
});
