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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | //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' ); } } |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?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' ); } }; |
php artisan migrate
C:\xampp\htdocs\laravel9\blog>php artisan migrate
Migration table created successfully.
check database table
Creating Routes
blog\routes\web.php
1 2 3 4 5 6 7 8 9 10 11 | //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' ); |
blog\resources\views\upload.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | //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> |
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