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

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" />
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
/*Upload file::*/
// Full Ajax request
$(".update").click(function(e) {
    // Stops the form from reloading
    e.preventDefault();
        $.ajaxSetup({
      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);
        
        
        $.ajax({
        url: 'ThisPageURL',
        type: 'POST',
        contentType:false,
        processData: false,
        data:image_upload,
            success: function(result) {
            alert(result.message);
            }
        });
});
 /*Upload file::*/
});
</script>

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"]);
    }
    else
    {
          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,

jassJatt

TheRichPost