Add file manager system to your laravel app

In this article i will share how to add file manager system to your laravel app . it will add mechanism to restrict users to see only their own folders. for this we will use a laravel package called laravel-filemanager . The original functions support image and file upload, this package only modifies the image functions.

Requirements

This package requires "intervention/image": "2.*", in order to make thumbs, crop and resize images.

Installation

  1. Run composer require intervention/image
  2. Run composer require unisharp/laravel-filemanager
  3. Edit config/app.php :

    Add this in service providers

        UnisharpLaravelfilemanagerLaravelFilemanagerServiceProvider::class,
        InterventionImageImageServiceProvider::class,

    And add this in class aliases

        'Image' => InterventionImageFacadesImage::class,
  4. Publish the package’s config and assets :
        php artisan vendor:publish --tag=lfm_config
        php artisan vendor:publish --tag=lfm_public
    
  5. Fill user_field with your user slug in config/lfm.php :
        'user_field' => "Auth::user()->name",
    
  6. View initiation
        <script>
            CKEDITOR.replace( 'editor', {
                filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images'
            });
        </script>

    Or initiate using ckeditor jquery adapter

        <script>
            $('textarea').ckeditor({
                filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images'
            });
        </script>
  7. Ensure that the files & images directories are writable by your web server

Customization

  1. To use your own route, edit config/lfm.php :
        'use_package_routes' => false,
  2. To disable multi-user mechanism, dit config/lfm.php :
        'allow_multi_user' => false,
  3. To specify upload directory, edit config/lfm.php :
        'images_dir'         => 'public/vendor/laravel-filemanager/images/',
        'images_url'         => '/vendor/laravel-filemanager/images/',
  4. If the route is changed, make sure filebrowserImageBrowseUrl is correspond to your route :
        <script>
            CKEDITOR.replace( 'editor', {
                filebrowserImageBrowseUrl: '/your-custom-route?type=Images'
            });
        </script>

    And be sure to include the ?type=Images parameter.

  5. To customize the views, run php artisan vendor:publish --tag=lfm_views

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Get The best In Web dev

Get The best In Web dev

Join dunebook and recieve best in Angular, React, Vue, Python, Java & more. Directly to your inbox once a week FREE !

You have Successfully Subscribed!

Pin It on Pinterest