Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
How to install laravel 9
https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel9
DB_USERNAME=root
DB_PASSWORD=
Creating Controller
php artisan make:controller UploadController
C:\xampp\htdocs\laravel9\blog>php artisan make:controller UploadController
change it with the following codes: blog\app\Http\Controllers\UploadController.php
//blog\app\Http\Controllers\UploadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\File; //add File Model
class UploadController extends Controller
{
public function index(){
$files = File::all();
return view('upload')->with('files', $files);
}
public function store(Request $request){
$messages = [
'required' => 'Please select file to upload',
];
$this->validate($request, [
'file' => 'required',
], $messages);
foreach ($request->file as $file) {
$filename = time().'_'.$file->getClientOriginalName();
$filesize = $file->getSize();
$file->storeAs('public/',$filename);
$fileModel = new File;
$fileModel->name = $filename;
$fileModel->size = $filesize;
$fileModel->location = 'storage/'.$filename;
$fileModel->save();
}
return redirect('/')->with('success', 'File/s Uploaded Successfully');
}
}
Creating Model php artisan make:model File -m
C:\xampp\htdocs\laravel9\blog>php artisan make:model File -m
This will create our model in the form of File.php file located : blog\app\Models\File.php
we put -m when we create our model.
this will automatically make the migration for our model and you will see that in yourproject/database/migrations
blog\database\migrations\create_members_table.php
edit code blog\database\migrations\create_file_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('files', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('size');
$table->string('location');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('files');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel9\blog>php artisan migrate
Migration table created successfully.
check database table
Creating Routes
blog\routes\web.php
//blog\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
//Route::get('/', function () {
// return view('welcome');
//});
Route::get('/','UploadController@index');
Route::post('/store','UploadController@store')->name('upload.file');
Creating Views blog\resources\views\upload.blade.php
//blog\resources\views\upload.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Laravel File Upload</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1 class="page-header text-center">Laravel 9 Multiple File Upload | File Storage</h1>
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-header">Upload Form</div>
<div class="card-body">
<form method="POST" action="{{ route('upload.file') }}" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="file" name="file[]" multiple><br><br>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
</div>
<div style="margin-top:20px;">
@if(count($errors) > 0)
@foreach($errors->all() as $error)
<div class="alert alert-danger text-center">
{{$error}}
</div>
@endforeach
@endif
@if(session('success'))
<div class="alert alert-success text-center">
{{session('success')}}
</div>
@endif
</div>
</div>
<div class="col-8">
<h2>Files Table</h2>
<table class="table table-bordered table-striped">
<thead>
<th>Photo</th>
<th>File Name</th>
<th>File Size</th>
<th>Date Uploaded</th>
<th>File Location</th>
</thead>
<tbody>
@if(count($files) > 0)
@foreach($files as $file)
<tr>
<td><img src='storage/{{$file->name}}' name="{{$file->name}}" style="width:90px;height:90px;"></td>
<td>{{ $file->name }}</td>
<td>
@if($file->size < 1000)
{{ number_format($file->size,2) }} bytes
@elseif($file->size >= 1000000)
{{ number_format($file->size/1000000,2) }} mb
@else
{{ number_format($file->size/1000,2) }} kb
@endif
</td>
<td>{{ date('M d, Y h:i A', strtotime($file->created_at)) }}</td>
<td><a href="{{ $file->location }}">{{ $file->location }}</a></td>
</tr>
@endforeach
@else
<tr>
<td colspan="5" class="text-center">No Table Data</td>
</tr>
@endif
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
File Storage https://laravel.com/docs/9.x/filesystem php artisan storage:link
C:\xampp\htdocs\laravel9\blog>php artisan storage:link
The [C:\xampp\htdocs\laravel9\blog\public\storage] link has been connected to [C:\xampp\htdocs\laravel9\blog\storage\app/public].
The links have been created.
Edit RouteServiceProvider.php
blog\app\Providers\RouteServiceProvider.php
uncomment protected $namespace = 'App\\Http\\Controllers';
Run C:\xampp\htdocs\laravel9\blog>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
