Laravel 8 Single Image File Upload With Validation

In this tutorial you will learn about the Laravel 8 Single Image File Upload With Validation and its application with practical example.

In this Laravel 8 Single Image File Upload With Validation Tutorial Example, we will learn how to upload and save single image file in laravel application database. I’ll show you how to upload file in Laravel 8 application, store all the image into the MySQL database.

Table Of Contents−

Laravel 8 Single Image File Upload With Validation
- Table of Contents
1). Install Laravel Fresh App

2). Setup Database
3). Generate Image Migration & Model
4). Create Image Upload Route

5). Create Image Upload Controller
6). Create Blade View
7). Create Images Directory inside Storage/app/public

8). Run Development Server

In this laravel simple image upload example, I’ll show you how to validate upload image into folder and then save it into database. In this tutorial before saving image into database we will validate image and then save it into directory using. Before uploading the image we will perform server side validation. After successfully image upload into the database and folder we will display success message on the screen.

Create Laravel 8 Project
Database Configuration
Create Model and Migrations

Create Controller
Create Routes
Create Blade File

Start Laravel Server

1). Install Laravel Fresh App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

composer create-project --prefer-dist laravel/laravel blog

1	composer create-project --prefer-dist laravel/laravel blog

2). Setup Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

3). Generate Image Migration & Model

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Photo -m

1	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();
    });
}

public function up()

{

Schema::create('photos', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('path');

$table->timestamps();

});

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

4). Create Image Upload Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\UploadImageController;
 
Route::get('upload-image', [UploadImageController::class, 'index']);
Route::post('save', [UploadImageController::class, 'save']);

use App\Http\Controllers\UploadImageController;

Route::get('upload-image', [UploadImageController::class, 'index']);

Route::post('save', [UploadImageController::class, 'save']);

5). Create Image Upload Controller

Now, lets create a controller named UploadImageController using command given below –

php artisan make:controller UploadImageController

1	php artisan make:controller UploadImageController

Now, 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');
 
    }
}

<?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');

}

6). Create Blade View

Now we will create a blade view file. Go to app/resources/views and create one file name image.blade.php :

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Uploading Image</title>

</head>

<body>

@if(session('status'))

</div>

@endif

<h2>Laravel 8 Upload Image Tutorial</h2>

</div>

@error('image')

<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>

@enderror

</div>

<button type="submit" class="btn btn-primary" id="submit">Submit</button>

</div>

</form>

</div>

</body>

</html>

7). Create Images Directory inside Storage/app/public

Now, create images directory inside storage/app/public directory.

8). Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/image-upload

1	http://127.0.0.1:8000/image-upload

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Single Image File Upload With Validation