If you are looking to implement image upload functionality in your Laravel web application, then this tutorial is for you. In this tutorial, you will learn how to upload images with validation in Laravel 10 apps. You will also learn how to validate the image’s mime type, size, and dimensions before storing it in the database.
How to Upload Image Upload In Laravel 10
By following this tutorial, you can implement image upload functionality with validation in Laravel 10 apps.
- Step 1 – Setup New Laravel 10 Application
- Step 2 – Setup Database with App
- Step 3 – Create Model & Migration
- Step 4 – Define 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 – Setup New Laravel 10 Application
First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:
composer create-project --prefer-dist laravel/laravel LaravelImage
Step 2 – Setup Database with App
In this step, Configure your database with your apps. So, visit your app root directory and find .env file. Then configure database details as follows:
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 – Define Routes
In this step, Visit your routes directory and open web.php file in any text editor. And add the following routes into web.php route file:
use App\Http\Controllers\UploadImageController;
Route::get('upload-image', [UploadImageController::class, 'index']);
Route::post('save', [UploadImageController::class, 'save']);
Step 5 – Create Controller By Artisan Command
In this step, execute the following command on terminal/command prompt/command line to create controller file for your laravel applications; is as follow:
php artisan make:controller UploadImageController
After that, go to app/http/controllers and open UploadImageController.php file. And update the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use App\Models\Image;
class UploadImageController extends Controller
{
public function index()
{
return view('image');
}
public function save(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('upload-image')->with('status', 'Image Has been uploaded');
}
}
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 10 Uploading Image</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
@if(session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Laravel 10 Upload Image Tutorial</h2>
</div>
<div class="card-body">
<form method="POST" enctype="multipart/form-data" id="upload-image" action="{{ url('save') }}" >
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="image" placeholder="Choose image" id="image">
@error('image')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</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
Finally, open command prompt or cmd 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
Conclusion
That’s all, you have learned how to upload image in laravel 10 application.
Good job Sir