Real Programmer
Laravel

Laravel File Manager Tutorial Example

2 Mins Read
Pinterest LinkedIn Tumblr
Laravel File Manager Tutoria

In this laravel tutorial, we will learn about how to make file manager in laravel

Step 1: Install Laravel 8

composer create-project --prefer-dist laravel/laravel laravel_filemanger
cd laravel_filemanger

Step 2: Install alexusmai/laravel-file-manager Package

In this step, You can install file manager package in this laravel app. So open terminal and put the bellow command.

composer require alexusmai/laravel-file-manager


after installing successfully, we need to publish configuration file using bellow command:

php artisan vendor:publish --tag=fm-config

Now they created file-manager.php file in config folder. you can add or remove disk list from “diskList” key as bellow:

config/file-manager.php

....'diskList' => ['local'],....

now we need to public asset files with following command:

php artisan vendor:publish --tag=fm-assets

Step 3: Create Controller

touch app/Http/Controllers/FileManagerController.php

Now, open you controller

<?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 4: Create Blade Files

touch resources/views/filemanager.blade.php

Now, Open your resources/views/filemanager.blade.php

<!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>Laravel File Manager Tutorial Example</title>
  
    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
    <div class="jumbotron">
        <h1>Laravel File Manager Tutorial Example</h1>
    </div>
        <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 5: Create Route

routes/web.php

<?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 6: Run your server

php artisan serve
http://127.0.0.1:8000/filemanager

Related Posts

Write A Comment