Home Ajax How to upload multiple images in laravel 6 with ajax?

How to upload multiple images in laravel 6 with ajax?

by therichpost
0 comment
upload multiple images in laravel 6 with ajax

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to upload multiple images in laravel 6 with ajax?

Post Working:

In this post, I am uploading multiple images in laravel 6 with ajax.

Here is the working code snippet and please follow carefully:

1. Here is the code , you need to add into your Blade template file:

Here is the code for upload image(HTML CODE) and you can add this code any blade template file:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Add Media Images : </div>
                <div class="alert alert-success" style="display:none">
                <div class="card-body">
                    <form enctype="multipart/form-data" method="post">
                        <div class="form-group">
                            <label for="image"><strong>Add Media:</strong></label>
                            <input type="file" class="form-control" id="image-upload" placeholder="Post Image" name="image_upload[]" required multiple>
                        <button type="button" class="btn btn-primary">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    jQuery("document").ready(function($) {
        // Full Ajax request
        $(".btn").click(function(e) {
            // Stops the form from reloading

                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
            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: "{{ url('addmedia') }}",
type: 'POST', contentType: false, processData: false, data: image_upload, success: function(result) { $("div.alert").show(); $("div.alert p").text(result.message); $('#image-upload').val(""); setTimeout(function() { $("div.alert").hide(); }, 3000); // 5 secs } }); }); }); </script> @endsection



2. Here is code for route/web.php file:

This code will connect form data to controller file:

Route::post('/addmedia', 'HomeController@createmedia')->middleware('ajax');


3. Here is the controller file code app\Http\Controllers\HomeController.php file:

This code will save images into folder and database and I have created images table into my database :

public function createmedia(Request $request)
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('pages/'), $picture);
      $postArray = ['image' => $picture,];
     $images = DB::table('images')->orderBy('id', "desc")->get();
         return response()->json(["message" => "Media added successfully.", "images" => $images]);
    return response()->json(["message" => "Media missing."]);



4. I have used Ajax Middleware and for creating ajax middleware, you have to check below link and do that functionality:

Ajax Middleware Laravel

This is it and if you have any kind of query then please do comment below.


Thank you

You may also like

Leave a Comment

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