Laravel File Manager – File and media management

Projects Inventory

2 weeks ago

To implement a file and media management system in your Laravel application, you can use a package like Laravel File Manager. This package provides a straightforward way to handle file uploads, management, and storage.

Step 1: Install Laravel File Manager

First, install the Laravel File Manager package via Composer. Run the following command:

bash

composer require unisharp/laravel-filemanager

1	composer require unisharp/laravel-filemanager

Step 2: Publish Configuration and Assets

Next, you need to publish the configuration file and assets of the package:

bash

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

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

This will publish the configuration file to config/lfm.php

and the public assets to the public/vendor/laravel-filemanager directory.

Step 3: Configure File Manager

Open the config/lfm.php configuration file and configure the settings according to your needs. Here are some important settings you might want to adjust:

Base directory: This defines where the files will be stored. By default, it’s set to public.
File system: Configure the file system driver if you want to use something other than the default local storage.

Example configuration:

php

return [
    'base_directory' => 'public',
    'disk' => 'local',
    'images_dir' => 'images',
    'files_dir' => 'files',
];

return [

'base_directory' => 'public',

'disk' => 'local',

'images_dir' => 'images',

'files_dir' => 'files',

];

Step 4: Set Up Routes

Next, you need to set up routes for the file manager. Open your routes/web.php file and add the following routes:

php

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

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

\UniSharp\LaravelFilemanager\Lfm::routes();

});

Make sure to add the 'auth' middleware if you want to restrict access to authenticated users.

Step 5: Add Middleware for Authentication

If you want to protect the file m anager routes, you can use Laravel’s built-in authentication middleware. Ensure you have authentication set up (e.g., Laravel Breeze, Jetstream, or any other method).

Step 6: Create a File Upload Form

You can create a simple file upload form in your Blade view. Here’s an example form:

blade

<form action="{{ route('lfm.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="file" name="file[]" multiple>
    <button type="submit">Upload</button>
</form>

@csrf

<button type="submit">Upload</button>

</form>

Step 7: Use File Manager in Your Views

To display the file manager in your views, you can include it using the provided JavaScript and CSS files.

Add the following lines to your Blade view:

blade

<link rel="stylesheet" href="{{ asset('vendor/laravel-filemanager/css/file-manager.css') }}">
<script src="{{ asset('vendor/laravel-filemanager/js/file-manager.js') }}"></script>

<script>
    $(document).ready(function() {
        $('#lfm').filemanager('image');
    });
</script>

<!-- Add an input for file URL -->
<input id="lfm" type="text" name="image" class="form-control" />
<button class="btn btn-primary" data-input="lfm" data-preview="holder">Choose Image</button>
<img id="holder" style="margin-top:15px;max-height:100px;">

$(document).ready(function() {

$('#lfm').filemanager('image');

});

</script>

<button class="btn btn-primary" data-input="lfm" data-preview="holder">Choose Image</button>

Step 8: Handling File Uploads

Once the user submits the file upload form, Laravel File Manager will handle the uploads and store them in the specified directory. You can access the files in your storage/app/public or public directory depending on your configuration.

Step 9: Display Uploaded Files

You can display the uploaded files by iterating through the files in the specified directory. For example, in your view:

blade

@foreach ($files as $file)
    <div>
        <img src="{{ asset('storage/' . $file->path) }}" alt="{{ $file->name }}">
        <p>{{ $file->name }}</p>
    </div>
@endforeach

@foreach ($files as $file)

<div>

</div>

@endforeach

Step 10: Configuring File Types and Validation

You can configure which file types are allowed for upload in the config/lfm.php file. Look for the allowed_types configuration:

php

'allowed_types' => ['jpg', 'png', 'gif', 'mp4', 'pdf'], // Add your allowed file types

1	'allowed_types' => ['jpg', 'png', 'gif', 'mp4', 'pdf'], // Add your allowed file types

Step 11: Handle File Deletion (Optional)

To delete files, you can create a method in your controller to handle the deletion:

php

public function destroy($id)
{
    $file = File::findOrFail($id);
    Storage::disk('local')->delete($file->path);
    $file->delete();

    return redirect()->back()->with('success', 'File deleted successfully');
}

public function destroy($id)

{

$file = File::findOrFail($id);

Storage::disk('local')->delete($file->path);

$file->delete();

return redirect()->back()->with('success', 'File deleted successfully');

}

Summary

With these steps, you’ve successfully set up a file and media management system in your Laravel application using Laravel File Manager. Here’s a quick recap of what you did:

Install Laravel File Manager using Composer.
Publish configuration and assets.
Configure the file manager settings.
Set up routes for file management.
Create a file upload form in your Blade view.
Use the file manager in your views for selecting files.
Handle file uploads and display uploaded files.
Optionally, configure allowed file types and handle file deletion.

Step 1: Install Laravel File Manager

Step 2: Publish Configuration and Assets

Step 3: Configure File Manager

Step 4: Set Up Routes

Step 5: Add Middleware for Authentication

Step 6: Create a File Upload Form

Step 7: Use File Manager in Your Views

Step 8: Handling File Uploads

Step 9: Display Uploaded Files

Step 10: Configuring File Types and Validation

Step 11: Handle File Deletion (Optional)

Summary

Related Posts: