Laravel 8 ajax image upload with preview. In this post, i will share with you how to display preview of image before upload image in laravel 8 using ajax.
As well as, you will learn how to display preview of image before upload to db and folder in laravel 8 using ajax.
Using this example, you can simply show preview of image before upload using ajax in laravel 8 without reload page.
Laravel 8 Ajax Image Upload with Preview Tutorial
Simple steps to ajax image upload with preview in laravel 8 app:
- Step 1 – Installing Laravel 8 Application
- Step 2 – Configuring Database Details
- Step 3 – Creating Model & Migration
- Step 4 – Create Routes
- Step 5 – Creating Controller
- Step 6 – Create Blade View
- Step 7 – Start Development Server
- Step 8 – Run Laravel 8 Ajax Image Upload Preview App On Browser
Step 1 – Installing Laravel 8 Application
In step 1, open your terminal and navigate to your local web server directory using the following command:
//for windows user cd xampp/htdocs //for ubuntu user cd var/www/html
Then install laravel 8 latest application using the following command:
composer create-project --prefer-dist laravel/laravel LaravelAjaxImageUploadPreview
Step 2 – Configuring Database Details
In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Step 3 – Creating Model & Migration
In step 3, open command prompt and navigate to your project by using the following command:
cd / LaravelAjaxImageUploadPreview
Then create model and migration file by using the following command:
php artisan make:model Image -m
The above command will create two files into your laravel 8 ajax image upload with preview tutorial app, which is located inside the following locations:
- LaravelAjaxImageUploadPreview/app/Models/Image.php
- LaravelAjaxImageUploadPreview/database/migrations/create_images_table.php
So, find create_images_table.php file inside LaravelAjaxImageUploadPreview/database/migrations/ directory. Then open this file and add the following code into function up() on this file:
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('path');
$table->timestamps();
});
}
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Step 4 – Create Routes
In step 4, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AjaxImagePreviewController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('ajax-image-upload-preview', [AjaxImagePreviewController::class, 'index']);
Route::post('upload-image-ajax', [AjaxImagePreviewController::class, 'ajaxUpload']);
Step 5 – Creating Controller
In step 5, create ajax image upload controller by using the following command:
php artisan make:controller AjaxImagePreviewController
The above command will create AjaxImagePreviewController.php file, which is located inside LaravelAjaxImageUploadPreview/app/Http/Controllers/ directory.
The following laravel validation rules will validate image file before upload/save into database:
$validatedData = $request->validate([
'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
]);
So open AjaxImagePreviewController.php file and add the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Image;
class AjaxImagePreviewController extends Controller
{
public function index()
{
return view('ajax-image-preview');
}
public function ajaxUpload(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 Image;
$save->name = $name;
$save->path = $path;
$save->save();
return response()->json($path);
}
}
The following single line of code will upload image inside storage/app/public/images directory:
$path = $request->file('image')->store('public/images');
Step 6 – Create Blade View
In step 6, create new blade view file that named ajax-image-preview.php inside resources/views directory for image upload form.
Note that, the following ajax code will upload image on laravel controller:
$.ajax({
type:'POST',
url: "{{ url('upload-image-ajax')}}",
data: data,
cache:false,
contentType: false,
processData: false,
success: (data) => {
$('#submit').html('Submit');
$("#submit"). attr("disabled", false);
alert('Ajax form has been submitted successfully');
this.reset();
},
error: function(data){
console.log(data);
}
});
And the following jQuery code will display preview of image before upload:
$('#image').change(function(){
let reader = new FileReader();
reader.onload = (e) => {
$('#preview-image').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
Don’t worry i have already added this code into ajax-image-preview.blade.php file.
So, you can add the following php and html form code into ajax-image-preview.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Ajax Image Upload With Preview Tutorial</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">
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>jQuery Ajax Image Upload with Preview in Laravel 8</h2>
</div>
<div class="card-body">
<form method="POST" enctype="multipart/form-data" id="ajax-image-upload-preview" 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" 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>
</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').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
$('#ajax-image-upload-preview').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: "{{ url('upload-image-ajax')}}",
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 – Start Development Server
Finally, open your command prompt again and run the following command to start development server for your laravel 8 ajax image upload with preview application:
php artisan serve
Step 8 – Run Laravel 8 Ajax Image Upload Preview App On Browser
In step 9, open your browser and fire the following url into your browser:
http://127.0.0.1:8000/ajax-image-upload-preview
Note that, in this example, the image will be upload on the following path – storage/app/public/images.
Laravel 8 ajax image upload with preview app will look like in the following image:
