Laravel 7/6 Ajax Image Upload With Preview Example Tutorial

Laravel 7/6 Ajax Image Upload With Preview Example Tutorial

Laravel 7.x and 6.x ajax image upload with preview example tutorial. Here you will learn, how to upload the image into the database and folder with a display preview example.

Before we upload the image into the folder and MySQL database using jquery ajax in laravel application, we will show the preview of the image. And also validate image using jquery before uploading into the server.

Here you can learn how to validate image on server-side and client-side validation. We will upload the image using jquery ajax without page refresh and reload.

Laravel Ajax Image Upload with Preview Example Tutorial

Just follow the below steps, upload the image with preview using the ajax and jQuery validation:

  • Install Laravel App
  • Setup Database
  • Install Image Intervention Package
  • Generate migration file and model
  • Make Route
  • Create Controller & Methods
  • Create Blade View
  • Make Folder
  • Run Development Server

1). Install Laravel App

First, we need to download a laravel fresh new setup. Use the below command and download fresh new laravel setup :

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

2). Setup Database

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

DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

3). Generate Migration & Model

Now we will create table name Photo and it’s migration file. use the below command :

php artisan make:model Photo -m

It command will create one model name Photo and also create one migration file for Photo table. After successfully run the command go to database/migrations file and replace function, below here :

public function up()
Schema::create('photos', function (Blueprint $table) {

Before we run php artisan migrate command go to app/providers/AppServiceProvider.php and put the below code :

use Illuminate\Support\Facades\Schema;
function boot()

Next migrate the table using the below command :

php artisan migrate

4). Make Route

We will create two routes in web.php file. Go to app/routes/web.php file and create two below routes here :

 Route::get('photo', 'ImageController@index');
Route::post('save-photo', 'ImageController@save');

5). Create Controller

We need to create a controller name ImageController. Use the below command and create Controller :

php artisan make:controller ImageController

After successfully create controller go to app/controllers/ImageController.php and put the below code :


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator,Redirect,Response,File;
Use Image;
Use App\Photo;
use Intervention\Image\Exception\NotReadableException;

class ImageController extends Controller

public function index()
  return view('image');

public function save(Request $request)
      'photo_name' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',

 if ($files = $request->file('photo_name')) {
    // for save original image
    $ImageUpload = Image::make($files);
    $originalPath = 'public/images/';
    // for save thumnail image
    $thumbnailPath = 'public/thumbnail/';
    $ImageUpload = $ImageUpload->save($thumbnailPath.time().$files->getClientOriginalName());

  $photo = new Photo();
  $photo->photo_name = time().$files->getClientOriginalName();

  $image = Photo::latest()->first(['photo_name']);
  return Response()->json($image);


6). Create Blade view

In this step we need to create blade view file. Go to app/resources/views and create one file name image.blade.php :

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel Ajax Image Upload Tutorial -</title>
<link rel="stylesheet" href="" />
<script src=""></script>
.avatar-pic {
width: 300px;
<div class="container">
<h3 style="margin-top: 12px;" class="text-center alert alert-success">Laravel Ajax Image Upload Tutorial - <a href="" target="_blank">TutsMake</a></h3>
<div class="row justify-content-center">
<div class="col-md-8">
<form id="imageUploadForm" action="javascript:void(0)" enctype="multipart/form-data">
<div class="file-field">
<div class="row">
<div class=" col-md-8 mb-4">
<img id="original" src="" class=" z-depth-1-half avatar-pic" alt="">
<div class="d-flex justify-content-center mt-3">
<div class="btn btn-mdb-color btn-rounded float-left">
<input type="file" name="photo_name" id="photo_name" required=""> <br>
<button type="submit" class="btn btn-secondary d-flex justify-content-center mt-3">submit</button>
<div class=" col-md-4 mb-4">
<img id="thumbImg" src="" class=" z-depth-1-half thumb-pic"

Now we will implement laravel ajax image upload script, put the below script after closing of body tag.


$(document).ready(function (e) {

$('#imageUploadForm').on('submit',(function(e) {


headers: {

  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')




var formData = new FormData(this);



   url: "{{ url('save-photo')}}",



   contentType: false,

   processData: false,


       $('#original').attr('src', 'public/images/'+ data.photo_name);


   error: function(data){







7). Make Folder

Now create one folder name images where we store our images :

Go to public folder 
=> first create folder name images

8). 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.

If you want to remove public or public/index.php from URL In laravel, Click Me


In this laravel ajax image upload example, we have successfully uploaded image into datatabase and folder and we have successfully image upload without page refresh and reload using ajax.

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

Recommended Laravel Tutorial

  1. Laravel Twitter Login Example Using Socialite Package
  2. Laravel Linkedin Login Tutorial With Live Demo
  3. Github Login in laravel with Example
  4. Laravel Socialite Google Login Example
  5. Laravel Multi Auth( Authentication) Example Tutorial
  6. Laravel Custom Login Registration Example Tutorial
  7. Laravel REST API (Login & Registration) Authentication

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Codeigniter, Vue JS, Angular JS, React Js, WordPress and Bootstrap from a starting stage.

Leave a Reply

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