DEV Community

Mubashar Ahmad
Mubashar Ahmad

Posted on

How to create Responsive FileManager in Laravel?

#php #laravel #filemanager

If you have some corrections, recommendations or anything else to say please let me know.

Read Responsive File Manager Documentation

How to Install ?

Install in your project 

composer require zanysoft/laravel-responsive-filemanager
Enter fullscreen mode Exit fullscreen mode

Now there is a new configuration file rfm.php
Install in config/app.php

'providers' => [ /* * Laravel Framework Service Providers... */ ... // Responsive File Manager ZanySoft\ResponsiveFileManager\FileManagerServiceProvider::class ],
Enter fullscreen mode Exit fullscreen mode

In app/Http/Kernel.php need to use StartSession, can also use and is recommended CSRF Token

protected $middlewareGroups = [ ... 'web' => [ ... \Illuminate\Session\Middleware\StartSession::class, // Responsive File Manager supports CSRF Token usage \App\Http\Middleware\VerifyCsrfToken::class ] ... ];
Enter fullscreen mode Exit fullscreen mode

then do

php artisan vendor:publish --provider="ZanySoft\ResponsiveFileManager\FileManagerServiceProvider"
Enter fullscreen mode Exit fullscreen mode

Generate private key for url identification

php artisan rfm:generate
Enter fullscreen mode Exit fullscreen mode

All configs included to work out of the box.
Files are meant to be stored in public folder.

Don't forget to set upload dir in config file

 $upload_dir = 'media/'; $thumbs_upload_dir = 'thumbs/'; //this will create inside upload directory
Enter fullscreen mode Exit fullscreen mode

Set route prefix in config file

 'route_prefix' => 'filemanager/', //or 'route_prefix' => 'admin/filemanager/',
Enter fullscreen mode Exit fullscreen mode

Set middleware in config file for security purpose

 'middleware' => 'auth', //defaualt is web
Enter fullscreen mode Exit fullscreen mode

Use as StandAlone

Use helpers to write filemanager url

 <a href="@filemanager_get_resource(dialog.php)?field_id=imgField&lang=en_EN&akey=@filemanager_get_key()">Open RFM</a> // OR <a href="@filemanager_dialog(['field_id'=>'imgField'])">Open RFM</a> // OR <a href="@filemanager_dialog()">Open RFM</a>
Enter fullscreen mode Exit fullscreen mode

see USE AS STAND-ALONE FILE MANAGER in Responsible File Manager Doc

Include in TinyMCE or CKEDITOR

Include JS

_ For CKEditor

Replace #MYTEXTAREAJS with your textarea input

 <script src='{{ asset('/vendor/unisharp/laravel-ckeditor/ckeditor.js') }}'></script> <script> $(document).ready(function() { if($("#MYTEXTAREAID").length) { CKEDITOR.replace( 'postBody', { filebrowserBrowseUrl : '@filemanager_get_resource(dialog.php)?akey=@filemanager_get_key()&type=2&editor=ckeditor&fldr=', filebrowserUploadUrl : '@filemanager_get_resource(dialog.php)?akey=@filemanager_get_key()&type=2&editor=ckeditor&fldr=', filebrowserImageBrowseUrl : '@filemanager_get_resource(dialog.php)?akey=@filemanager_get_key()&type=1&editor=ckeditor&fldr=', language : '<?php App::getLocale() ?>' }); } }) </script>
Enter fullscreen mode Exit fullscreen mode
  • For TinyMCE

with tinymce parameters

 $(document).ready(() => { $('textarea').first().tinymce({ script_url : '/tinymce/tinymce.min.js', width: 680,height: 300, plugins: [ "advlist autolink link image lists charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking", "table contextmenu directionality emoticons paste textcolor filemanager code" ], toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect", toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor | print preview code ", image_advtab: true , filemanager_access_key: '@filemanager_get_key()', filemanager_relative_url: true, filemanager_sort_by: '', filemanager_descending: '', filemanager_basefolder: '', filemanager_subfolder: '', filemanager_crossdomain: '', external_filemanager_path: '@external_filemanager_path()', filemanager_title:"Responsive Filemanager" , external_plugins: { "filemanager" : "/vendor/responsivefilemanager/plugin.min.js"} }); });
Enter fullscreen mode Exit fullscreen mode

To make private folder use .htaccess with Deny from all

Top comments (1)

Collapse
 
kornatzky profile image
Yoram Kornatzky •

Looks great. I recommend you add a screenshot or GIF to show how it actually looks. I followed the link to your site but could not find the screenshot.

Bravo!