How To Upload Multiple Image Using Ajax In Laravel

Posted By Bajarangi soft , Posted On 24-01-2021

We can upload multiple images using ajax with Json response.

How To Upload Multiple Image Using Ajax In Laravel

Step 1:Create a table and model for Multiple Image Uploading.

class Image extends Model
{
public $table = 'image';

protected $fillable = [
'name','password','confirm_password','image'
];
}

Step: 2 Create a View file like image.blade.php and add image fields and make one aajx script for image uploading
resources/views/image.blade.php.

<html>
<head>
<title>Image</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel='stylesheet' href='style.css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='script.js'></script>

</head>
<br>
<body>
<div id="main_container" class="container">
<div class="alert alert-warning" id="message" style="display: none"></div>
<div class="row">
<form id="preview" method="POST" action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
@csrf

<div class="col-md-6">
{{ csrf_field() }}
<div class="form-group">
<div id="birth_date_input" class="control-label">Image:
<input type="file" id="images" name="images[]" enctype="multipart/form-data" multiple>

</div>
</div>
</div>
<div class="col-md-6">
<button id="imgbtn" class="btn btn-success" style="margin-top: 25px;">Upload</button>
</div>

<div class="row">
<div class="col-md-12">
<div id="age_container"><span id="exact_age"></span></div>
<div id="age_container"><span id="exact_age1"></span></div>
<div id="age_container"><span id="exact_age2"></span></div>
</div>

</div>
</form>
</div>
<div class="show-multiple-image-preview"> </div>
</div>

<script>
$(document).ready(function (e) {
$('#preview').submit(function(e)
{
e.preventDefault();
var formData = new FormData(this);
let TotalImages = $('#images')[0].files.length; //Total Images
let images = $('#images')[0];
for (var i = 0; i < TotalImages; i++) {
formData.append('images' + i, images.files[i]);
}
formData.append('TotalImages', TotalImages);
$.ajax({
type:'POST',
url: "{{ url('upload')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
$('#message').css('display', 'block');
$('#message').html(data.message);
setTimeout(function() {
$('#message').fadeOut('slow');
}, 5000);
},
error: function(data){
console.log(data);
}
});
});
});
</script>
</script>
</body>
</html>

Step 3: Make controller file for multiple image and uploaded it to the folder and make response of success image uploading.
app/Http/Controllers/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
public function index()
{
return view('image');
}
function store(Request $request)
{
if($request->TotalImages > 0)
{
   $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);
           $filename = $file->getClientOriginalName();
           $extension = $file->getClientOriginalExtension();
           $picture = date('His').'-'.$filename;
           $file->move(public_path('images/'), $picture);
                   $postArray = ['images' => $picture,];
       }

      }
$value = Image::create($postArray);
return response()->json([
   'message' => 'Multiple Image Uploaded Successfully..',
   ]);
       }
       else
       {
       return response()->json(["message" => "Media missing."]);
       }
   }
}
}

Step: 4 Make a route for connection with controller.
app/Http/routes.php

Route::get('image', 'ImageController@index');
Route::post('/upload', 'ImageController@store');