Categories

Saturday, October 5, 2024
#919814419350 therichposts@gmail.com
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 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

 

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

7 Comments

Leave a Reply

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