Laravel File Manager Tutorial Example Step By Step

by

Laravel File Manager Example; In this tutorial you will learn how to install and use file manager package in laravel application. The UniSharp/laravel-filemanager package support multiple files selection, cloud storage integration and mutiple features as well. Lets see how to integrate laravel file manager tutorial with example step by step.

The Unisharp package has multiple feature just like below:

Features
  • File upload and management
  • Uploading validation
  • Cropping and resizing of images
  • RWD user interface, and can be entirely customized
  • Supporting multiple files selection
  • Supporting cloud storages integration(with Laravel file system)
  • Multiple integration options:
    • WYSIWYG editors integration (CKEditor, TinyMCE, Summernote)
    • Standalone upload button
    • Iframe
  • Multi-user mode:
    • Shared folders: all users can upload and manage files
    • Private folders: dedicated folder for each user, only the owner can upload or manage files within
  • Customizable routes, middlewares, views, and folder path
  • Supports two categories: files and images. Each type works in different directory.
  • Supported locales : ar, az, bg, cs, de, el, en, es, eu, fa, fr, he, hu, id, it, ka, nl, pl, pt, pt-BR, ro, rs, ru, sk, sv, tr, uk, vi, zh-CN, zh-TW

Step 1: Install Laravel App

First, we need to create one fresh laravel application help of the composer command. just run the following command in your terminal and create one laravel application.

composer create-project --prefer-dist laravel/laravel laravel-app

Step 2: Configure Database Credentials

Now, into the second step, we should configure the database settings in .env file just open your .env file and make the following changes. set youe database name, username, and password.

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=ajax_crud
 DB_USERNAME=root
 DB_PASSWORD=

Step 3: Install Unisharp Package

Next, install the filemanager package using the following command:

composer require unisharp/laravel-filemanager

Add providers and aliases in config app file, open app.php file and update provider and aliases.

//Providers
UniSharp\LaravelFilemanager\LaravelFilemanagerServiceProvider::class,
Intervention\Image\ImageServiceProvider::class,

//Aliases
'Image' => Intervention\Image\Facades\Image::class,

Now publish the package’s config and assets using bellow command:

php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public

Step 4: Add Route

Open the web.php routes file and update the below code on it.

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\FileManagerController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('filemanager', [FileManagerController::class, 'index']);

Step 5: Create Controller

Now create new controller as FileManagerController just running below command.

php artisan make:controller FileManagerController

After successfully created controller add below methods on it.

app/Http/Controllers/FileManagerController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class FileManagerController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {   
        return view('filemanager');
    }
}

Step 6: Create Blade Files

Next, create blade files for filemanager. So, navigate resources/views and create filemanager.blade.php file. Now open the created resources/views/filemanager.blade.php file and put the following code;

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
  
    <title>{{ config('app.name', 'File Manager') }}</title>
  
    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
    <link href="{{ asset('vendor/file-manager/css/file-manager.css') }}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h2>Laravel File Manager Tutorial Example - codingdriver.Com</h2>
        <div class="row">
            <div class="col-md-12" id="fm-main-block">
                <div id="fm"></div>
            </div>
        </div>
    </div>
  
    <!-- File manager -->
    <script src="{{ asset('vendor/file-manager/js/file-manager.js') }}"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('fm-main-block').setAttribute('style', 'height:' + window.innerHeight + 'px');
  
        fm.$store.commit('fm/setFileCallBack', function(fileUrl) {
          window.opener.fmSetLink(fileUrl);
          window.close();
        });
      });
    </script>
</body>
</html>

Step 7: Run Development Server

php artisan serve

Next, hitt the below url in your browser

http://localhost:8000/laravel-filemanager

If you will get fileuploading error then generate symbolic link bellow command.

php artisan storage:link

I hope this code work for you.

Leave a Comment