Laravel 7/6 Ajax Multiple Image Upload with Preview

Laravel 7/6 multiple image upload with preview using ajax. In this laravel tutorial, you will learn how to upload multiple images with preview using ajax in laravel.

Sometimes, you work with laravel apps and want to upload multiple images without refreshing a web page with a display preview of each image. So this tutorial will guide you step by step on how to upload multiple images with preview using ajax in laravel 7.x, 6.x version.

If you want to upload multiple images in laravel apps without using ajax. But you want to show preview of images before upload to database and folder, you can checkout this tutorial => Laravel Multiple Image Upload With Preview Tutorial.

Laravel 7 Multiple Image Upload with Preview Using Ajax

Just follow the below steps and upload multiple images using ajax with showing preview in laravel applications:

Install Laravel Fresh Setup
Setup Database Credentials
Create Route
Generate Controller By Command
Create the blade view
Start Development Server

1: Install Laravel Fresh Setup

We need to install laravel fresh application using below command, Open your command prompt and run the below command :

composer create-project --prefer-dist laravel/laravel Blog

After successfully install laravel Application, Go to your project .env file and set up database credential and move next step.

2: Setup Database Credentials

In this step, we will set database credentials in the .env file. Let’s open .env file.

 
DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

3: Create Route

Next, We need to add the resource route. Go to routes/web.php put the below routes here :

Route::get('images-upload', 'ImageController@imagesUpload');

Route::post('images-upload', 'ImageController@imagesUploadPost')->name('images.upload');

Recommended:- Laravel Custom Validation Error Message

4: Generate Controller by Command

Create the ImageController using the below command.

php artisan make:controller ImageController

This command will create a controller name ImageController.

Next open controller, Go to app/HTTP/Controller/ImageController and update the below code here :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller

{

    /**

     * Create a new controller instance.

     *

     * @return void

     */

    public function imagesUpload()

    {

        return view('image');

    }



    /**

     * Create a new controller instance.

     *

     * @return void

     */

    public function imagesUploadPost(Request $request)

    {

        request()->validate([

            'uploadFile' => 'required',

        ]);



        foreach ($request->file('uploadFile') as $key => $value) {

            $imageName = time(). $key . '.' . $value->getClientOriginalExtension();

            $value->move(public_path('images'), $imageName);

        }



        return response()->json(['success'=>'Images Uploaded Successfully.']);

    }

}

5: Create the blade view

We need to create some blade views files, Go to app/resources/views/ and create one blade view file name image.blade.php and update the following code into your file:

image.blade.php

<!DOCTYPE html>

<html>

<head>

  <title>Laravel Ajax Multiple Image Upload with Preview Example</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>



  <style type="text/css">

    input[type=file]{

      display: inline;

    }

    #imgPreview{

      border: 1px solid black;

      padding: 10px;

    }

    #imgPreview img{

      width: 200px;

      padding: 5px;

    }

  </style>



</head>

<body>

<div class="container">

  <h1>Laravel Multiple Image Upload using Ajax with Preview Example</h1>

  <form action="{{ route('images.upload') }}" method="post" enctype="multipart/form-data">

      {{ csrf_field() }}

      <input type="file" id="uploadFile" name="uploadFile[]" multiple/>

      <input type="submit" class="btn btn-success" name='submitImage' value="Upload Image"/>

  </form>



  <br/>

  <div id="imgPreview"></div>

</div>



</body>



<script type="text/javascript">



  $("#uploadFile").change(function(){

     $('#imgPreview').html("");

     var total_file=document.getElementById("uploadFile").files.length;

     for(var i=0;i<total_file;i++)

     {

      $('#imgPreview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");

     }

  });



  $('form').ajaxForm(function() 

   {

    alert("Uploaded SuccessFully");

   }); 



</script>

</html>

6: Run Development Server

In this step, we will use the PHP artisan serve command. It will start your server locally

php artisan serve

If you want to run the project diffrent port so use this below command 

php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run.

http://localhost:8000/images-upload

Conclusion

In this laravel tutorial, you have learn how to upload multiple images with preview using ajax in laravel web applications.