Home Ajax How to Upload and save multiple images in folder in Laravel with Ajax?

How to Upload and save multiple images in folder in Laravel with Ajax?

by therichpost
Laravel 7.2 routing with route group auth guard check with prefix

Hello guys, welcome to therichpost.com. In this post, I will tell you, How to Upload and save multiple images in folder in Laravel with Ajax?

This is very interesting and very helpful post for every laravel developer. In this post, I am uploading multiple image with ajax and save in folder with laravel.

I personally like this code very much. This is the first part for upload and save multiple files and I will come with more parts belong to this post so stay in touch.

Here are working tested code for Upload and save multiple images in folder in Laravel with Ajax and you need to follow the below all the steps:


1. Very first, here is the code for, your laravel blade template file:

In this, I used html input field and jquery ajax. With ajax formdata, I am sending total images counts and images to laravel controller:

<form enctype="multipart/form-data" method="post">
  <input id="image-upload" name="image_upload[]" type="file"  multiple/>
  <input class="update btn btn-purple" type="button" value="Upload Gallery" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(function() {
/*Upload file::*/
// Full Ajax request
$(".update").click(function(e) {
    // Stops the form from reloading
      headers: {
        'X-CSRF-TOKEN': Laravel.csrfToken
    let image_upload = new FormData();
    let TotalImages = $('#image-upload')[0].files.length;  //Total Images
    let images = $('#image-upload')[0];  

    for (let i = 0; i < TotalImages; i++) {
    image_upload.append('images' + i, images.files[i]);
    image_upload.append('TotalImages', TotalImages);
        url: 'ThisPageURL',
        type: 'POST',
        processData: false,
            success: function(result) {
 /*Upload file::*/

2.  Here is the code for routes/web.php file:

In which we declare the url paths:

Route::post('BladeTeplateFileUrl', 'YourController@addgallery')->middleware('ajax');

3. Here is the final code for your laravel controller file, which you have mentioned in web.php file:

/*Upload Gallery*/
    public function addgallery(Request $request){
       //Check Files Count
         if($request->TotalImages > 0)
        //Loop for getting files with index like image0, image1
            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;
      //Save files in below folder path, that will make in public folder
            $file->move(public_path('img/gallery-images'), $picture);
         return response()->json(["message" => "success"]);
          return response()->json(["message" => "failed"]);

This is guys, if you have any query related to this post, then do comment below or ask question.

I want know your views related to this post because your view makes me encourage. This is my promise, second part of this post, will make you blush haha.

Thank you,




You may also like


Prashant November 15, 2018 - 5:44 pm

nice one

Ajay Malhotra November 15, 2018 - 5:45 pm

Thank you Prashant.

Jasmeen November 16, 2018 - 4:42 am

Its really helpful post.

Ajay Malhotra November 16, 2018 - 4:42 am

Thank you Jasmeen

I'd be keep November 16, 2018 - 11:16 am

Hi got for

Hafiq November 16, 2018 - 6:29 am

Really helpful.. just my suggestion to make it simpler.. line 11 – 17 it would be nice just use Storage

`Storage::disk(“images”)->put(“filename_$x.png”, $request->file(‘images’.$x));`

Ajay Malhotra November 16, 2018 - 4:27 pm

Hi, Hafiq, thank you for tip.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.