Laravel 8 Multiple Image Upload Validation Tutorial

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

In this Laravel 8 Multiple Image Upload validation Tutorial, we will learn how to upload multiple image with validation in laravel 8. In this Multiple Image Upload validation Tutorial, I’ll show you how to upload multiple image in laravel with validation and save into folder and then save it into database. In this tutorial before saving multiple image into database we will validate image and then save it into directory. Before uploading the image we will validate the image. After successfully uploading multiple images into the folder and saving it in database we will display success message on the screen.

Table Of Contents−

Laravel 8 Multiple Image Upload Validation Tutorial
Install Laravel 8

.env file

In this I’ll show you how to upload multiple image in laravel 8. While uploading image in laravel. In this step by step tutorial I’ll demonstrate example of multiple image upload with Validation in laravel 8. Please follow the step given below:

Install Laravel 8 Application
Configure Database In .env File

Create Photo Model & Migration
Create Routes
Create Controller using Artisan Command

Create Blade View
Start Development Server
Start App on Browser

Install Laravel 8

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

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

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

Configure Database In .env file

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.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara8blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara8blog

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

Now, we have to define table schema for photos table. Open terminal and let’s run the following command to generate a migration along with model file to create photos table in our database.

php artisan make:model Photo -m

1	php artisan make:model Photo -m

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

public function up()
{
    Schema::create('photos', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->string('path');
        $table->timestamps();
    });
}

public function up()

{

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

$table->id();

$table->string('title');

$table->string('path');

$table->timestamps();

});

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the photos table will be created in database.

Create Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

use App\Http\Controllers\UploadMultipleImageController;
 
Route::get('multiple-image-upload', [UploadImagesController::class, 'index']);
 
Route::post('multiple-image-upload', [UploadImagesController::class, 'store']);

use App\Http\Controllers\UploadMultipleImageController;

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

Route::post('multiple-image-upload', [UploadImagesController::class, 'store']);

Create Controller By Artisan Command

Now, lets create a controller for multiple image uploading with validation. Create a controller named UploadMultipleImageController using command given below –

php artisan make:controller UploadMultipleImageController

1	php artisan make:controller UploadMultipleImageController

Once the above command executed, it will create a controller file UploadMultipleImageController.php in app/Http/Controllers/ directory. Open the UploadMultipleImageController.php file and put the following code in it.

app/Http/Controllers/UploadMultipleImageController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Photo;
class UploadImagesController extends Controller
{
   public function index()
    {
        return view('multiple-image-upload');
    }
    public function store(Request $request)
    {
         
        $validateImageData = $request->validate([
        'images' => 'required',
            'images.*' => 'mimes:jpg,png,jpeg,gif,svg'
        ]);
        if($request->hasfile('images'))
         {
            foreach($request->file('images') as $key => $file)
            {
                $path = $file->store('public/images');
                $name = $file->getClientOriginalName();
                $insert[$key]['title'] = $name;
                $insert[$key]['path'] = $path;
            }
         }
        Photo::insert($insert);
 
        return redirect('multiple-image-upload')->with('status', 'Multiple Images has been uploaded successfully');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Photo;

class UploadImagesController extends Controller

{

public function index()

{

return view('multiple-image-upload');

}

public function store(Request $request)

{

$validateImageData = $request->validate([

'images' => 'required',

'images.*' => 'mimes:jpg,png,jpeg,gif,svg'

]);

if($request->hasfile('images'))

{

foreach($request->file('images') as $key => $file)

{

$path = $file->store('public/images');

$name = $file->getClientOriginalName();

$insert[$key]['title'] = $name;

$insert[$key]['path'] = $path;

}

Photo::insert($insert);

return redirect('multiple-image-upload')->with('status', 'Multiple Images has been uploaded successfully');

}

Create Blade Views

In this step, we will create view/blade file to generate and display multiple Image Upload Form. Lets create a blade file “multiple-image-upload.blade.php” in “resources/views/” directory and put the following code in it respectively.

resources/views/multiple-image-upload.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Uploading Multiple Images In Laravel 8 With Validation</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="main">
    <div class="card-header text-center font-weight-bold mb-2">
      <h2>Laravel 8 Upload Multiple Image Validation</h2>
    </div>
      <form name="upload-multiple-image" method="POST"  action="{{ url('upload-multiple-image') }}" accept-charset="utf-8" enctype="multipart/form-data">
        @csrf
                 
          <div class="row">
              <div class="col-md-12">
                    <div class="form-group">
                        <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
                        </div>
                        <div class="custom-file">
                          <input type="file" class="custom-file-input" id="images" name="images[]" multiple="">
                          <label class="custom-file-label" for="inputGroupFile01">Choose Multiple Images</label>
                        </div>
                      </div>
                    </div>
                  @error('images')
                      <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                  @enderror
              </div>
                 
              <div class="col-md-12">
                  <button type="submit" class="btn btn-primary" id="submit">Submit</button>
              </div>
          </div>     
      </form>
  </div>
</div>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Uploading Multiple Images In Laravel 8 With Validation</title>

</head>

<body>

@if(session('status'))

</div>

@endif

<h2>Laravel 8 Upload Multiple Image Validation</h2>

</div>

@csrf

<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>

</div>

<label class="custom-file-label" for="inputGroupFile01">Choose Multiple Images</label>

</div>

@error('images')

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

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://localhost:8000/upload-multiple-image

1	http://localhost:8000/upload-multiple-image

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Multiple Image Upload Validation Tutorial