Laravel 7/6 Ajax Multiple Image Upload with Preview

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', '[email protected]');

Route::post('images-upload', '[email protected]')->name('images.upload');

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.

Recommended Laravel Tutorials

  1. Laravel Tutorial From Scratch | Step By Step
  2. Laravel Ajax CRUD(DataTables Js) Tutorial Example
  3. Upload Files/Images to Amazon s3 Cloud Using Laravel Filesystem
  4. Laravel Ajax CRUD (Operation) Application Example
  5. Laravel Angular JS CRUD Example Tutorial
  6. Ajax Image Upload In Laravel Tutorial Example From Scratch
  7. Laravel CKEditor with Image Upload
  8. Laravel Intervention Upload Image Using Ajax – Example
  9. Upload Image to Database with Validation in laravel

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *