Tuesday, October 4, 2022
AjaxLaravelLaravl 5.7

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

Laravel 7.2 routing with route group auth guard check with prefix

Upload and save multiple images in folder in Laravel with Ajax


Hello guys, welcome to 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=""></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,




the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

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