How to Set Up a File Manager in Laravel 11

Welcome to this comprehensive tutorial on setting up a file manager in Laravel 11. This guide will walk you through the steps to create a simple and efficient file manager for your Laravel application. We’ll cover installation, configuration, and usage with practice code examples.

Prerequisites

Before we start, make sure you have the following:

Laravel 11 installed: You can install it via Composer if you haven’t done so.
Basic understanding of Laravel: Knowing the basics like routes, controllers, and views will be helpful.

Step 1: Setting Up a New Laravel Project

If you don’t have a Laravel project set up, let’s create one.

composer create-project --prefer-dist laravel/laravel file-manager-tutorial
cd file-manager-tutorial

Step 2: Install the File Manager Package

We will use the UniSharp Laravel File Manager package. Install it via Composer:

composer require unisharp/laravel-filemanager

Step 3: Publish the Package Assets

Next, we need to publish the package assets, which include configuration files, views, and more.

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

Step 4: Configure the File Manager

Open the config/lfm.php file to configure the file manager settings. Adjust the configuration as per your needs. For simplicity, we’ll use the default settings for now.

Step 5: Set Up Authentication

The file manager is designed to be used with authenticated users. Ensure you have authentication set up in your Laravel application. If not, you can set it up quickly with:

composer require laravel/ui
php artisan ui vue --auth
npm install
npm run dev
php artisan migrate

Step 6: Add Routes

Next, we need to add routes for the file manager in the routes/web.php file.

use UniSharp\LaravelFilemanager\Lfm;

Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () {
    Lfm::routes();
});

Step 7: Create a Controller

We will create a controller to handle the file manager. Run the following Artisan command to create a new controller:

php artisan make:controller FileManagerController

Inside FileManagerController.php, add the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileManagerController extends Controller
{
    public function index()
    {
        return view('file-manager');
    }
}

Step 8: Create a View

Now, let’s create a view to display the file manager. Create a file named file-manager.blade.php inside the resources/views directory and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel File Manager</title>
    <link rel="stylesheet" href="{{ asset('vendor/laravel-filemanager/css/cropper.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/laravel-filemanager/css/lfm.css') }}">
    <script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
</head>
<body>
    <div class="container">
        <h1>Laravel File Manager</h1>
        <div>
            <label>File Manager:</label>
            <div class="input-group">
                <span class="input-group-btn">
                    <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
                        <i class="fa fa-picture-o"></i> Choose
                    </a>
                </span>
                <input id="thumbnail" class="form-control" type="text" name="filepath">
            </div>
            <img id="holder" style="margin-top:15px;max-height:100px;">
        </div>
    </div>

    <script>
        var route_prefix = "/laravel-filemanager";
        $('#lfm').filemanager('image', {prefix: route_prefix});
    </script>
</body>
</html>

Step 9: Link Everything Together

Finally, we need to make sure everything is linked together. Update your routes in routes/web.php to include the new controller method:

Route::get('/file-manager', [FileManagerController::class, 'index'])->name('file-manager');

Step 10: Access the File Manager

Now, you can access the file manager by visiting http://your-app-url/file-manager in your browser. Make sure you are logged in to view the file manager.

Conclusion

Congratulations! You have successfully set up a simple file manager in Laravel 11. This basic setup allows you to upload, browse, and manage files within your Laravel application. From here, you can explore more features of the UniSharp Laravel File Manager package, like image cropping, file validation, and more, to extend your file management capabilities.

Feel free to modify and enhance this basic tutorial to fit your specific requirements. Happy coding!

Check our tools small Tools
Check our tools website Word count