Laravel 9 File manager integration tutorial

  • 02-01-2023
  • 3436
  • Laravel 9
  • Haresh Chauhan
Watch Youtube Video (HINDI) :

If you wish to manage your file system using the laravel file manager, in this post I will teach you how to integrate it into laravel 9 app.

We will integrate this file managing system using composer alexusmai/laravel-file-manager, this composer will install in our laravel app, and then we will config then so we can easily use this file managing system.

upload all the files and docs using laravel file manager will store them in the storage folder on the laravel application, you will see all the files and docs in the storage/app/public folder.

I will teach you one by one steps to integrate file manager in the application also, I am attaching a video tutorial for this you can also follow this tutorial for more crazy understanding.

Using alexusmai/laravel-file-manager we can easily integrate and upload files and document files and images etc.., as well as we can view, preview, and listing can also show in the web browser, and more functionality like copy, make a folder, cut and paste files, download files and docs, different view sizes all the functionality we will see in this laravel file manager tutorial.

Step 1. Composoer Install

In this step we will install a composer, this composer's name is alexusmai/laravel-file-manager. In using the below command we will install the laravel file manager composer in the laravel application, this composer will install core dependency for the file manager in the application.

composer require alexusmai/laravel-file-manager

After the successful composer is installed we will move ahead, we will public a configuration file if you wish to make customization setting the default setting you make changes very easily by changes in the configuration file.

Use the below-provided command for the publish configuration file.

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

now you will see a file-manager.php file in the config folder, open this file and you will see an attribute "decklist" if you don't want can you either remove it or stay as it is.

'diskList' => ['local'],

After that we will publish the asset file with the following command :

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

Then after successful configuration move forward to the next step.

Step 2. Make Route

Before creating a route in the web.php file, we will create a FileManagerController using the following command.

php artisan make:controller FileManagerController

Now we will create a route in the web.php file

routes/web.php 
use App\Http\Controllers\FileManagerController;

Route::get('filemanager', [FileManagerController::class, 'index']);

Step 3. File Manager Controller

In this FileManagerController we will create an index method, in this index method, we will view the filemanager blade file.

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 4. Create Blade File

Create a file manager blade file for the view user interface, this file blade we will view in the index method, and this HTML blade file we will return from the index method from the FileManagerController. you just copy the code from below and paste it into your filemanager.blade.php file.

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 9 File Manager Tutorial - Webappfix.com</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">
        <h1>Laravel 9 File Manager Tutorial - Webappfix.com</h1>
        <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. Start Development Server

Start the development server using the below provided command in your application terminal, this command will start the locally development server.

php artisan server

Once you start your development server you will see the localhost URL in the terminal, or you can copy the below URL and paste it into your web browser, make sure you started your xampp apache2 server.

localhost:8000/filemanager

that's it you can see, and upload files and docs, all the above steps must be required and need to follow one by one step, and you will integrate the file manager tutorial in your application successfully. I hope you enjoy this tutorial and successfully integrate it into your application. keep following us and share these tutorial links with your developer group thanks.

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :