Laravel 8 Multiple Images Upload With Validation Example

Today In this tutorial, I will share how to upload multiple images with validation in Laravel 8. Also, to store images in the storage and images path in the MySQL database using laravel.

So, If you want to know how to build a functionality to upload multiple images at once in Laravel 8, then you are in the right place.

This tutorial is for uploading multiple files in which you will see how we can upload multiple photos in Laravel.

Multiple file uploading is a simple process of uploading the same time. So let's learn how we will use laravel 8 to upload multiple photos in the database in a very easy way.

[Laravel 8 Multiple Images Upload] With Validation Example- Step By Step

Step: 1 Create Project

Run the following command to create a Laravel project.

composer create-project laravel/laravel --prefer-dist laravel-image-upload

Step 2: Define Database Configuration

We can either use MAMP or XAMPP to set up a local webserver. Define your database configuration in .env file.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel_db
DB_USERNAME=root
DB_PASSWORD=

Step 3: Create Model And Migrations

Create a Model and Migration using the following command.

php artisan make:model Image -m

Place the below code in

database/migrations/create_images_table file to define the table schema.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('name')->nullable();
            $table->string('image_path')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

Place the below code inside the app/Image.php file.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    //
    protected $fillable = [
        'name',
        'image_path'
    ];
}

Next, execute the command to run the migration. This migration can be seen in your PHPMyAdmin panel or the database.

php artisan migrate

Step 4: Create Routes

Go to routes/web.php and create two routes. One for image uploading form with get method and another route for image uploading with the post method.

// Create image upload form
Route::get('/image-upload', 'FileUpload@createForm');

// Store image
Route::post('/image-upload', 'FileUpload@fileUpload')->name('imageUpload');

Step 5: Create Image Uploading Controller

Run the command to generate the image uploading controller.

php make:controller FileUpload

Go to app/Http/Controllers/FileUpload.php file, and define the createForm() and fileUpload() methods to manage the image uploading in Laravel 8.

The createForm() function brings the from in the view, and the fileUpload() method handles uploading, storing, and validation in the image uploading controller.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\File;

class FileUpload extends Controller
{
  public function createForm(){
    return view('file-upload');
  }

  public function fileUpload(Request $req){
        $req->validate([
        'file' => 'required|mimes:csv,txt,xlx,xls,pdf|max:2048'
        ]);

        $fileModel = new File;

        if($req->file()) {
            $fileName = time().'_'.$req->file->getClientOriginalName();
            $filePath = $req->file('file')->storeAs('uploads', $fileName, 'public');

            $fileModel->name = time().'_'.$req->file->getClientOriginalName();
            $fileModel->file_path = '/storage/' . $filePath;
            $fileModel->save();

            return back()
            ->with('success','File has been uploaded.')
            ->with('file', $fileName);
        }
   }

}

This controller also covered:

Validation on image uploading.
Displays image uploading status through message updates.
Allows only particular file types. e.g. jpg, jpeg, png, and gif.
Apply file size limitation up to 2MB max.
Storing images in the laravel storage and uploaded images path in the database.

Step 6: Create Blade Template

For uploading multiple images we need a view. Create resources\views\image-upload.blade.php file and add the following code.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <title>Laravel 8 Multiple Images Upload With Validation Example - phpcodingstuff.com</title>
    <style>
        .container {
            max-width: 500px;
        }
        dl, ol, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .imgPreview img {
            padding: 8px;
            max-width: 100px;
        } 
    </style>
</head>

<body>

    <div class="container mt-5">
        <h3 class="text-center mb-5">Image Upload in Laravel</h3>
        <form action="{{route('imageUpload')}}" method="post" enctype="multipart/form-data">
            @csrf
            @if ($message = Session::get('success'))
                <div class="alert alert-success">
                    <strong>{{ $message }}</strong>
                </div>
            @endif

            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="user-image mb-3 text-center">
                <div class="imgPreview"> </div>
            </div>            

            <div class="custom-file">
                <input type="file" name="imageFile[]" class="custom-file-input" id="images" multiple="multiple">
                <label class="custom-file-label" for="images">Choose image</label>
            </div>

            <button type="submit" name="submit" class="btn btn-primary btn-block mt-4">
                Upload Images
            </button>
        </form>
    </div>
  
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script>
        $(function() {
        // Multiple images preview with JavaScript
        var multiImgPreview = function(input, imgPreviewPlaceholder) {

            if (input.files) {
                var filesAmount = input.files.length;

                for (i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();

                    reader.onload = function(event) {
                        $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
                    }

                    reader.readAsDataURL(input.files[i]);
                }
            }

        };

        $('#images').on('change', function() {
            multiImgPreview(this, 'div.imgPreview');
        });
        });    
    </script>
</body>
</html>

Start The Application

We have created the view now let us start the application using the following command.

php artisan serve

View URL:

http://127.0.0.1:8000/image-upload

I hope it can help you...

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.