Laravel 9 Upload Image Example Tutorial

Laravel 9 image upload; In this tutorial, we will learn how to upload images into 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.

Laravel 9 Upload Image Example Tutorial

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',$imageName);

}
}

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/bootstrap@5.0.2/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