Laravel 8 image upload example; In this tutorial, you will learn how to upload image in laravel 8 into database and storage directory with validation.
And as well as, how to validate image mime type, size, dimension, etc on laravel controller by using laravel validation rules.
This Image upload in Laravel 8 tutorial will create image upload form in laravel 8 with validation, which is used store image into database and storage directory.
Image Upload In Laravel 8
Use the following steps to upload image on public storage and directory in laravel 8 applications:
- Step 1 – Download Laravel 8 Application
- Step 2 – Setup 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 8 Application
First of all, download or install laravel 8 new setup. So, open terminal and type the following command to install new laravel 8 app into your machine:
composer create-project --prefer-dist laravel/laravel LaravelImage
Step 2 – Setup Database with App
In this step, setup database with your downloded/installed laravel 8 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:
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, run the following command on command prompt to create controller file:
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 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 8 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 8 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
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
Recommended Laravel Posts
