Laravel 8 Ajax Multiple Image Upload Tutorial

Ajax multiple image uploading with preview in laravel 8 app. In this tutorial, we would like to share with you how to upload multiple image using ajax with preview in laravel 8 app.

Before uploading multiple images using jQuery and ajax into DB and folder in laravel 8 app, will display the preview of multiple images using jQuery. And Also, validate image mime type, size, height, width on the server side.

Multiple image upload using ajax in laravel 8 app is very basic requirement of every laravel project.

So, In this tutorial, you will learn how to upload multiple image using jQuery and ajax with preview in laravel 8 App.

Laravel 8 Ajax Multiple Image Upload with Preview Tutorial

Step 1 – Install Laravel 8 Application
Step 2 – Database Configuration
Step 3 – Build Photo Model & Migration
Step 4 – Create Routes
Step 5 – Generate Controller using Artisan Command
Step 6 – Create an Ajax Form to Upload Multiple Image
Step 7 – jQuery Code To Show Multiple Image Preview
Step 8 – Write Ajax Code to Upload Multiple Image
Step 9 – Start Development Server

Step 1 – Install Laravel 8 Application

In step 1, open your terminal and navigate to your local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install laravel 8 latest application using the following command:

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

Step 2 – Database Configuration

In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3 – Build Model & Migration

In this step, use the below given command to create phtoto migration and model file.

First of all, navigate to project by using the following command:

cd / blog

Then create model and migration file by using the following command:

php artisan make:model Photo -m

The above command will create two files into your laravel 8 multiple image upload with validation tutorial app, which is located inside the following locations:

blog/app/Models/Photo.php
blog/database/migrations/create_photos_table.php

So, find create_photos_table.php file inside blog/database/migrations/ directory. Then open this file and add the following code into function up() on this file:

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

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

php artisan migrate

Step 4 – Create Routes

In this step, open your web.php file, so navigate inside routes directory. Then update the following routes into the web.php file:

use App\Http\Controllers\AjaxUploadMultipleImageController;
 
Route::get('multiple-image-preview', [AjaxUploadMultipleImageController::class, 'index']);
 
Route::post('upload-multiple-image-ajax', [AjaxUploadMultipleImageController::class, 'saveUpload']);

Step 5 – Create Controller using Artisan Command

In this step, use the below given php artisan command to create controller:

php artisan make:controller AjaxUploadMultipleImageController

The above command will create AjaxUploadMultipleImageController.php file, which is located inside blog/app/Http/Controllers/ directory.

So open UploadImagesController.php file and add the following code into it:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Photo;
 
class AjaxUploadMultipleImageController extends Controller
{
   public function index()
    {
        return view('multiple-image-upload-preview-ajax');
    }
 
    public function saveUpload(Request $request)
    {
         
        $validatedData = $request->validate([
        'images' => 'required',
        'images.*' => 'mimes:jpg,png,jpeg,gif,svg'
        ]);
 
        if($request->TotalImages > 0)
        {
                
           for ($x = 0; $x < $request->TotalImages; $x++) 
           {
 
               if ($request->hasFile('images'.$x)) 
                {
                    $file      = $request->file('images'.$x);
 
                    $path = $file->store('public/images');
                    $name = $file->getClientOriginalName();
 
                    $insert[$x]['name'] = $name;
                    $insert[$x]['path'] = $path;
                }
           }
 
            Photo::insert($insert);
 
            return response()->json(['success'=>'Multiple Image has been uploaded into db and storage directory']);
 
          
        }
        else
        {
           return response()->json(["message" => "Please try again."]);
        }
 
    }   
         
}

Step 6 – Create an Ajax Form to Upload Multiple Image

In step this, Go to resources/views directory. And then create a new blade view file named multiple-image-upload-preview-ajax.blade.php inside this directory.

So, open this multiple-image-upload-preview-ajax.blade.php file in text editor and update the following code into it:

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Multiple Image Upload AJAX With Preview - Tutsmake.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.show-multiple-image-preview img
{
padding: 6px;
max-width: 100px;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Laravel 8 Ajax Multiple Image Upload With Preview - Tutsmake.com</h2>
<div class="text-center">
<form id="multiple-image-preview-ajax" method="POST"  action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="images[]" id="images" placeholder="Choose images" multiple >
</div>
@error('images')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="col-md-12">
<div class="mt-1 text-center">
<div class="show-multiple-image-preview"> </div>
</div>  
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>     
</form>
</div>
</div>  
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(function() {
// Multiple images preview with JavaScript
var ShowMultipleImagePreview = 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() {
ShowMultipleImagePreview(this, 'div.show-multiple-image-preview');
});
});    
$('#multiple-image-preview-ajax').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
let TotalImages = $('#images')[0].files.length; //Total Images
let images = $('#images')[0];
for (let i = 0; i < TotalImages; i++) {
formData.append('images' + i, images.files[i]);
}
formData.append('TotalImages', TotalImages);
$.ajax({
type:'POST',
url: "{{ url('upload-multiple-image-ajax')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Images has been uploaded using jQuery ajax with preview');
$('.show-multiple-image-preview').html("")
},
error: function(data){
console.log(data);
}
});
});
});
</script>
</body>
</html>

Step 7 – jQuery Code To Show Multiple Image Preview

In this step, implement the jQuery code to display or show multiple image preview before upload using ajax in laravel 8:

$(function() {
// Multiple images preview with JavaScript
var ShowMultipleImagePreview = 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() {
ShowMultipleImagePreview(this, 'div.show-multiple-image-preview');
});
}); 

Step 8 – Write Ajax Code to Upload Multiple Image

In this step, implement the jQuery and ajax code will upload multiple image on laravel 8 controller file:

$('#multiple-image-preview-ajax').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
let TotalImages = $('#images')[0].files.length; //Total Images
let images = $('#images')[0];
for (let i = 0; i < TotalImages; i++) {
formData.append('images' + i, images.files[i]);
}
formData.append('TotalImages', TotalImages);
$.ajax({
type:'POST',
url: "{{ url('upload-multiple-image-ajax')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Images has been uploaded using jQuery ajax with preview');
$('.show-multiple-image-preview').html("")
},
error: function(data){
console.log(data);
}
});
});

Step 9 – Start Development Server

In this step, run the following command on cmd to start the development server:

php artisan serve

Then start this app on browser, so open your browser and fire the following url into browser:

http://127.0.0.1:8000/multiple-image-preview

23 February, 2021

Laravel 8 Ajax Multiple Image Upload Tutorial