Laravel File Manager Example; In this tutorial you will learn how to install and use file manager package in laravel application. The UniSharp/laravel-filemanager package support multiple files selection, cloud storage integration and mutiple features as well. Lets see how to integrate laravel file manager tutorial with example step by step.
The Unisharp package has multiple feature just like below:
Features
- File upload and management
- Uploading validation
- Cropping and resizing of images
- RWD user interface, and can be entirely customized
- Supporting multiple files selection
- Supporting cloud storages integration(with Laravel file system)
- Multiple integration options:
- WYSIWYG editors integration (CKEditor, TinyMCE, Summernote)
- Standalone upload button
- Iframe
- Multi-user mode:
- Shared folders: all users can upload and manage files
- Private folders: dedicated folder for each user, only the owner can upload or manage files within
- Customizable routes, middlewares, views, and folder path
- Supports two categories: files and images. Each type works in different directory.
- Supported locales : ar, az, bg, cs, de, el, en, es, eu, fa, fr, he, hu, id, it, ka, nl, pl, pt, pt-BR, ro, rs, ru, sk, sv, tr, uk, vi, zh-CN, zh-TW
Step 1: Install Laravel App
First, we need to create one fresh laravel application help of the composer command. just run the following command in your terminal and create one laravel application.
composer create-project --prefer-dist laravel/laravel laravel-app
Step 2: Configure Database Credentials
Now, into the second step, we should configure the database settings in .env file just open your .env file and make the following changes. set youe database name, username, and password.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=ajax_crud DB_USERNAME=root DB_PASSWORD=
Step 3: Install Unisharp Package
Next, install the filemanager package using the following command:
composer require unisharp/laravel-filemanager
Add providers and aliases in config app file, open app.php file and update provider and aliases.
//Providers
UniSharp\LaravelFilemanager\LaravelFilemanagerServiceProvider::class,
Intervention\Image\ImageServiceProvider::class,
//Aliases
'Image' => Intervention\Image\Facades\Image::class,
Now publish the package’s config and assets using bellow command:
php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public
Step 4: Add Route
Open the web.php routes file and update the below code on it.
<?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 5: Create Controller
Now create new controller as FileManagerController just running below command.
php artisan make:controller FileManagerController
After successfully created controller add below methods on it.
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 6: Create Blade Files
Next, create blade files for filemanager. So, navigate resources/views and create filemanager.blade.php file. Now open the created resources/views/filemanager.blade.php file and put the following code;
<!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>{{ config('app.name', 'File Manager') }}</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">
<h2>Laravel File Manager Tutorial Example - codingdriver.Com</h2>
<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 7: Run Development Server
php artisan serve
Next, hitt the below url in your browser
http://localhost:8000/laravel-filemanager
If you will get fileuploading error then generate symbolic link bellow command.
php artisan storage:link
I hope this code work for you.