Laravel 9 image upload; In this tutorial, we will learn how to upload images to the MySQL database and storage directory with validation in laravel 9 apps. And as well as, how to validate image mime type, size, dimension, etc on laravel controller by using laravel validation rules.
How to Upload Image to Database in Laravel 9 Apps
Use the following steps to upload image on public storage and directory in laravel 9 applications:
- Step 1 – Download Laravel 9 Application
- Step 2 – Configure Database with App
- Step 3 – Create Model & Migration
- Step 4 – Create Routes
- Step 5 – Create Controller By Artisan Command
- Step 6 – Create Blade View
- Step 7 – Create Images Directory inside Storage/app/public
- Step 8 – Run Development Server
Step 1 – Download Laravel 9 Application
First of all, download or install laravel 9 new setup. So, open terminal and type the following command to install new laravel 9 app into your machine:
composer create-project --prefer-dist laravel/laravel LaravelImage
Step 2 – Configure Database with App
In this step, setup database with your downloded/installed laravel 9 app. So, you need to find .env file and setup database details as following:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password
Step 3 – Create Model & Migration
In this step, open again your command prompt. And run the following command on it. To create model and migration file for form:
php artisan make:model Photo -m
After that, open create_photos_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with following code:
public function up()
{
Schema::create('photos', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('path');
$table->timestamps();
});
}
Then, open again command prompt and run the following command to create tables into database:
php artisan migrate
Step 4 – Create Routes
In this step, open web.php file from routes direcotry. And update the following routes into web.php file:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
/*
|--------------------------------------------------------------------------
| 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('image-upload', [ ImageController::class, 'index' ]);
Route::post('image-upload', [ ImageController::class, 'store' ])->name('image.store');
Step 5 – Create Controller By Artisan Command
In this step, run the following command on command prompt to create image controller file:
php artisan make:controller ImageController
After that, go to app/http/controllers and open ImageController.php file. And update the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Image;
class ImageController extends Controller
{
public function index()
{
return view('image');
}
public function store(Request $request)
{
$validatedData = $request->validate([
'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
]);
$name = $request->file('image')->getClientOriginalName();
$path = $request->file('image')->store('public/images');
$save = new Photo;
$save->name = $name;
$save->path = $path;
$save->save();
return redirect('image-upload')->with('status', 'Image Has been uploaded')->with('image',$name);
}
}
The following line of code will upload an image into the images directory:
$path = $request->file('image')->store('public/images');
Step 6 – Create Blade View
Now, create image upload form in blade view file to display image upload form and submit to the database.
So, Go to resources/views and create image.blade.php and update the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Image Upload Example - Tutsmake.com</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h2>Laravel 9 Image Upload Example - Tutsmake.com</h2>
</div>
<div class="panel-body">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
<img src="images/{{ Session::get('image') }}">
@endif
<form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label class="form-label" for="inputImage">Image:</label>
<input
type="file"
name="image"
id="inputImage"
class="form-control @error('image') is-invalid @enderror">
@error('image')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb-3">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
The following below code will display the validation error message on the blade view file:
@error('image')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
Step 7 – Create Images Directory inside Storage/app/public
Now, create images directory inside storage/app/public directory. Because the following line of code will upload an image into the images directory, which is located inside storage/app/public/ directory:
$path = $request->file('image')->store('public/images');
Step 8 – Run Development Server
Last step, open command prompt and run the following command to start developement server:
php artisan serve
Then open your browser and hit the following url on it:
http://127.0.0.1:8000/image-upload
