Laravel 8 Ajax Image Upload with Preview Tutorial

Laravel 8 ajax image upload with preview example. In this tutorial, we will share with you how to upload image using jQuery ajax with preview in laravel 8.

And also we will show you how to image jQuery and ajax code for display preview and upload image without refresh or reload web or html page.

This is very basic need of uploading image using ajax with display preview in laravel 8 app.

So, in this tutorial, we will show you step by step how to upload image with preview using jQuery and ajax in laravel 8 app.

Laravel 8 Ajax Image Upload with Preview Example Tutorial

Step 1 – Download Laravel 8 Application
Step 2 – Database Configuration
Step 3 – Build Model & Migration
Step 4 – Create Routes
Step 5 – Generate Controller By Artisan Command
Step 6 – Create Ajax Image Upload Form
Step 7 – Create Images Directory inside Storage/app/public
Step 8 – Run Development Server

Step 1 – Download Laravel 8 Application

First of all, download or install laravel 8 new setup. So, open terminal and type the following command to install new laravel 8 app into your machine:

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

Step 2 – Database Configuration

In this step, setup database with your downloded/installed laravel 8 app. So, you need to find .env file and setup database details as following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

Step 3 – Build Model & Migration

In this step, open again your command prompt. And run the following command on it. To create model and migration file for form:

php artisan make:model Photo -m

After that, open create_photos_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with following code:

public function up()
{
    Schema::create('photos', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('path');
        $table->timestamps();
    });
}

Then, open again command prompt and run the following command to create tables into database:

php artisan migrate

Step 4 – Create Routes

In this step, open web.php file from routes direcotry. And update the following routes into web.php file:

use App\Http\Controllers\AjaxUploadController;
 
Route::get('image-preview', [AjaxUploadController::class, 'index']);
Route::post('upload', [AjaxUploadController::class, 'store']);

Step 5 – Generate Controller By Artisan Command

In this step, run the following command on command prompt to create controller file:

php artisan make:controller AjaxUploadController

After that, go to app/http/controllers and open AjaxUploadController.php file. And update the following code into it:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Photo;
 
class AjaxUploadController extends Controller
{
     public function index()
    {
        return view('image-upload-preview-form');
    }
 
    public function store(Request $request)
    {
         
        $validatedData = $request->validate([
         'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
 
        ]);
 
        $name = $request->file('image')->getClientOriginalName();
 
        $path = $request->file('image')->store('public/images');
 
 
        $save = new Photo;
 
        $save->name = $name;
        $save->path = $path;
 
        $save->save();
 
        return response()->json($path);
 
    }
}

The following line of code will upload an image into the images directory:

1	`$path = $request->file('image')->store('public/images');`

Step 6 – Create Ajax Image Upload Form

Now, create ajax image upload with preview form in blade view file to displa image preview before upload upload to database and folder.

So, Go to resources/views and create image-upload-preview-form.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Ajax Image Upload With Preview - Tutsmake.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container mt-4">
<h2 class="text-center">Image Upload with Preview using jQuery Ajax in Laravel 8 - Tutsmake.com</h2>
<form method="POST" enctype="multipart/form-data" id="image-upload" action="javascript:void(0)" >
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="image" placeholder="Choose image" id="image">
</div>
</div>
<div class="col-md-12 mb-2">
<img id="preview-image-before-upload" src="https://www.riobeauty.co.uk/images/product_image_not_found.gif"
alt="preview image" style="max-height: 250px;">
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>     
</form>
</div>
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#image').change(function(){
let reader = new FileReader();
reader.onload = (e) => { 
$('#preview-image-before-upload').attr('src', e.target.result); 
}
reader.readAsDataURL(this.files[0]); 
});
$('#image-upload').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: "{{ url('upload')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Image has been uploaded using jQuery ajax successfully');
},
error: function(data){
console.log(data);
}
});
});
});
</script>
</div>  
</body>
</html>

Step 7 – Create Images Directory inside Storage/app/public

Now, create images directory inside storage/app/public directory. Because the following line of code will upload an image into the images directory, which is located inside storage/app/public/ directory.

Step 8 – Run Development Server

Last step, open command prompt and run the following command to start developement server:

php artisan serve

Then open your browser and hit the following url on it:

http://127.0.0.1:8000/image-preview

23 February, 2021

Laravel 8 Ajax Image Upload with Preview Tutorial