Laravel File Manager Tutorial Example

Pinterest LinkedIn Tumblr

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:


....'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

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() }}">
    <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="[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="">
    <link href="{{ asset('vendor/file-manager/css/file-manager.css') }}" rel="stylesheet">
    <link href="[email protected]/dist/css/bootstrap.min.css">
    <div class="container">
    <div class="jumbotron">
        <h1>Laravel File Manager Tutorial Example</h1>
        <div class="row">
            <div class="col-md-12" id="fm-main-block">
                <div id="fm"></div>
    <!-- File manager -->
    <script src="{{ asset('vendor/file-manager/js/file-manager.js') }}"></script>
      document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('fm-main-block').setAttribute('style', 'height:' + window.innerHeight + 'px');
        fm.$store.commit('fm/setFileCallBack', function(fileUrl) {

Step 5: Create Route



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