Laravel 8 Ajax CRUD with Image Upload Tutorial

In this tutorial you will learn about the Laravel 8 Ajax CRUD with Image Upload Tutorial and its application with practical example.

In this Laravel 8 Ajax Crud with Image Upload Example tutorial, I’ll show you how to create basic CRUD application with Image upload using DataTables in laravel 8. In this tutorial you learn to create simple CRUD application with image upload using DataTables. In this step by step tutorial we will be creating simple crud application with image upload using DataTables in laravel.

Table Of Contents−

Laravel 8 Ajax CRUD with Image Upload Tutorial

In this step by step guide, we will be creating a simple laravel 8 application to demonstrate you how to install yajra datatable package and implement ajax based CRUD operations with datatable js.

Step 1 – Install laravel 8 App

Step 2 – Connecting App to Database
Step 3 – Create Migration And Model
Step 4 – Install Yajra DataTables In App

Step 5 – Add Routes
Step 6 – Create Controller
Step 7 – Create Blade View

Step 8 – Run Development Server

Step 1 – Install Fresh Laravel Setup

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2 – Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .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

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

Step 3 – Create Migration And Model

Now, in this step we will create model and migration file. Please run the following command:

php artisan nake:modal Product -m

1	php artisan nake:modal Product -m

Now, go to database/migrations/ and open create_products_table.php file. Then put the following code into this file:

<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('product_code')->nullable();
            $table->string('image')->nullable();
            $table->text('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('products', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->string('product_code')->nullable();

$table->string('image')->nullable();

$table->text('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('products');

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Now, go to App directory and open Product.php file and then put the following code to into Product.php file as follow:

<?php


namespace App\Models;


use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;


class Product extends Model
{
    use HasFactory;


    protected $fillable = [
                           'title',
                           'product_code',
                           'description',
                           'image'
                       ];
                        
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

protected $fillable = [

'title',

'product_code',

'description',

'image'

];

}

Step 4 – Install Yajra Datatables Package in Laravel

In this step, we will install Yajra Datatables Package via the composer dependency manager. Use the following command to install Yajra Datatables.

composer require yajra/laravel-datatables-oracle

1	composer require yajra/laravel-datatables-oracle

After installing Yajra Datatables Packages in your laravel application. Open config/app.php file and add service provider and alias

 config/app.php
 
 
 'providers' =&gt; [
 
 
 Yajra\Datatables\DatatablesServiceProvider::class,
 ],
 
 
 'aliases' =&gt; [
 
 
 'Datatables' =&gt; Yajra\Datatables\Facades\Datatables::class,
 ]

config/app.php

'providers' => [

Yajra\Datatables\DatatablesServiceProvider::class,

'aliases' => [

'Datatables' => Yajra\Datatables\Facades\Datatables::class,

]

After set providers and aliases then publish vendor run by following command.

php artisan vendor:publish

1	php artisan vendor:publish

Step 5 – Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\ProductController;

Route::get('product-list', [ProductController::class, 'index']);
Route::get('product-list/{id}/edit', [ProductController::class, 'edit']);
Route::post('product-list/store', [ProductController::class, 'store']);
Route::get('product-list/delete/{id}', [ProductController::class, 'destroy']);

use App\Http\Controllers\ProductController;

Route::get('product-list', [ProductController::class, 'index']);

Route::get('product-list/{id}/edit', [ProductController::class, 'edit']);

Route::post('product-list/store', [ProductController::class, 'store']);

Route::get('product-list/delete/{id}', [ProductController::class, 'destroy']);

Step 6 – Create Controller

Now, lets create a controller named ProductController using command given below –

php artisan make:controller ProductController

1	php artisan make:controller ProductController

Next navigate to app/Http/Controllers and open ProductController.php file. Then update the following methods for add products, edit product and delete the product into this controller file:

The Product Controller, will include following methods:
Index() :- The index method will be used to display list of all products.
Store() :- The store method will be used to save and update the product into a database.
Edit() :- The edit method will be used to edit product detail.
Destroy() :- The delete method will be used to delete product from list and database as well.

Now, update all methods into your ProductController.php file as follow:

<?php
   
namespace App\Http\Controllers;
   
use App\Product;
use Illuminate\Http\Request;
use Redirect,Response,DB;
use File;
use PDF;
   
class ProductController extends Controller
{
    public function index()
    {
        if(request()->ajax()) {
            return datatables()->of(Product::select('*'))
            ->addColumn('action', 'product-button')
            ->addColumn('image', 'image')
            ->rawColumns(['action','image'])
            ->addIndexColumn()
            ->make(true);
        }
        return view('list');
    } 
 
    public function store(Request $request)
    {  
        request()->validate([
            'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
       ]);
 
        $productId = $request->product_id;
 
        $details = ['title' => $request->title, 'product_code' => $request->product_code, 'description' => $request->description];
 
        if ($files = $request->file('image')) {
            
           //delete old file
           \File::delete('public/product/'.$request->hidden_image);
         
           //insert new file
           $destinationPath = 'public/product/'; // upload path
           $profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
           $files->move($destinationPath, $profileImage);
           $details['image'] = "$profileImage";
        }
         
        $product   =   Product::updateOrCreate(['id' => $productId], $details);  
               
        return Response::json($product);
    } 
 
    public function edit($id)
    {   
        $where = array('id' => $id);
        $product  = Product::where($where)->first();
      
        return Response::json($product);
    }
    public function destroy($id) 
    {
        $data = Product::where('id',$id)->first(['image']);
        \File::delete('public/product/'.$data->image);
        $product = Product::where('id',$id)->delete();
      
        return Response::json($product);
    }
}

<?php

namespace App\Http\Controllers;

use App\Product;

use Illuminate\Http\Request;

use Redirect,Response,DB;

use File;

use PDF;

class ProductController extends Controller

{

public function index()

{

if(request()->ajax()) {

return datatables()->of(Product::select('*'))

->addColumn('action', 'product-button')

->addColumn('image', 'image')

->rawColumns(['action','image'])

->addIndexColumn()

->make(true);

}

return view('list');

}

public function store(Request $request)

{

request()->validate([

'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',

]);

$productId = $request->product_id;

$details = ['title' => $request->title, 'product_code' => $request->product_code, 'description' => $request->description];

if ($files = $request->file('image')) {

//delete old file

\File::delete('public/product/'.$request->hidden_image);

//insert new file

$destinationPath = 'public/product/'; // upload path

$profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();

$files->move($destinationPath, $profileImage);

$details['image'] = "$profileImage";

}

$product = Product::updateOrCreate(['id' => $productId], $details);

return Response::json($product);

}

public function edit($id)

{

$where = array('id' => $id);

$product = Product::where($where)->first();

return Response::json($product);

}

public function destroy($id)

{

$data = Product::where('id',$id)->first(['image']);

\File::delete('public/product/'.$data->image);

$product = Product::where('id',$id)->delete();

return Response::json($product);

}

Step 7 – Create Blade View

Create the directory and create blade view file for CRUD operations as following: Now, Navigate to resources/views directory and create action.blade.php file.

<a href="javascript:void(0)" data-toggle="tooltip"  data-id="{{ $id }}" data-original-title="Edit" class="edit btn btn-success edit-product">
    Edit
</a>
<a href="javascript:void(0);" id="delete-product" data-toggle="tooltip" data-original-title="Delete" data-id="{{ $id }}" class="delete btn btn-danger">
    Delete
</a>

Edit

</a>

Delete

</a>

Next, create a list.blade.php file inside resources/views/ folder and update the below code in your product list file.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel Ajax Crud Example with Image Upload Tutorial</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a href="javascript:void(0)" class="btn btn-info ml-3" id="create-new-product">Add New</a>
<br><br></br><br>
<table class="table table-bordered table-striped" id="laravel_datatable">
<thead>
<tr>
<th>ID</th>
<th>S. No</th>
<th>Image</th>
<th>Title</th>
<th>Product Code</th>
<th>Description</th>
<th>Created at</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
<div class="modal fade" id="ajax-product-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="productCrudModal"></h4>
</div>
<div class="modal-body">
<form id="productForm" name="productForm" class="form-horizontal" enctype="multipart/form-data">
<input type="hidden" name="product_id" id="product_id">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Title</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="title" name="title" placeholder="Enter Tilte" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Product Code</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="product_code" name="product_code" placeholder="Enter Tilte" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="description" name="description" placeholder="Enter Description" value="" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Image</label>
<div class="col-sm-12">
<input id="image" type="file" name="image" accept="image/*" onchange="readURL(this);">
<input type="hidden" name="hidden_image" id="hidden_image">
</div>
</div>
<img id="modal-preview" src="https://via.placeholder.com/150" alt="Preview" class="form-group hidden" width="100" height="100">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="btn-save" value="create">Save changes
</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div> 
</body>
</html>

<!DOCTYPE html>

<head>

<title>Laravel Ajax Crud Example with Image Upload Tutorial</title>

</head>

<body>

<thead>

<tr>

<th>Image</th>

<th>Title</th>

<th>Product Code</th>

<th>Description</th>

<th>Created at</th>

<th>Action</th>

</tr>

</thead>

</table>

</div>

</div>

<label for="name" class="col-sm-2 control-label">Title</label>

</div>

<label for="name" class="col-sm-2 control-label">Product Code</label>

</div>

<label class="col-sm-2 control-label">Description</label>

</div>

<label class="col-sm-2 control-label">Image</label>

</div>

<button type="submit" class="btn btn-primary" id="btn-save" value="create">Save changes

</button>

</div>

</form>

</div>

</div>

</body>

</html>

Next, you will create a script code for performing create, store, update and delete products from the database table products using jQuery ajax request in laravel. So update this code in your list.blade.php file:

<script>
var SITEURL = '{{URL::to('')}}';
$(document).ready( function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#laravel_datatable').DataTable({
processing: true,
serverSide: true,
ajax: {
url: SITEURL + "product-list",
type: 'GET',
},
columns: [
{data: 'id', name: 'id', 'visible': false},
{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
{data: 'image', name: 'image', orderable: false},
{ data: 'title', name: 'title' },
{ data: 'product_code', name: 'product_code' },
{ data: 'description', name: 'description' },
{ data: 'created_at', name: 'created_at' },
{data: 'action', name: 'action', orderable: false},
],
order: [[0, 'desc']]
});
/*  When user click add user button */
$('#create-new-product').click(function () {
$('#btn-save').val("create-product");
$('#product_id').val('');
$('#productForm').trigger("reset");
$('#productCrudModal').html("Add New Product");
$('#ajax-product-modal').modal('show');
$('#modal-preview').attr('src', 'https://via.placeholder.com/150');
});
/* When click edit user */
$('body').on('click', '.edit-product', function () {
var product_id = $(this).data('id');
$.get('product-list/' + product_id +'/edit', function (data) {
$('#title-error').hide();
$('#product_code-error').hide();
$('#description-error').hide();
$('#productCrudModal').html("Edit Product");
$('#btn-save').val("edit-product");
$('#ajax-product-modal').modal('show');
$('#product_id').val(data.id);
$('#title').val(data.title);
$('#product_code').val(data.product_code);
$('#description').val(data.description);
$('#modal-preview').attr('alt', 'No image available');
if(data.image){
$('#modal-preview').attr('src', SITEURL +'public/product/'+data.image);
$('#hidden_image').attr('src', SITEURL +'public/product/'+data.image);
}
})
});
$('body').on('click', '#delete-product', function () {
var product_id = $(this).data("id");
if(confirm("Are You sure want to delete !")){
$.ajax({
type: "get",
url: SITEURL + "product-list/delete/"+product_id,
success: function (data) {
var oTable = $('#laravel_datatable').dataTable(); 
oTable.fnDraw(false);
},
error: function (data) {
console.log('Error:', data);
}
});
}
});  
});
$('body').on('submit', '#productForm', function (e) {
e.preventDefault();
var actionType = $('#btn-save').val();
$('#btn-save').html('Sending..');
var formData = new FormData(this);
$.ajax({
type:'POST',
url: SITEURL + "product-list/store",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
$('#productForm').trigger("reset");
$('#ajax-product-modal').modal('hide');
$('#btn-save').html('Save Changes');
var oTable = $('#laravel_datatable').dataTable();
oTable.fnDraw(false);
},
error: function(data){
console.log('Error:', data);
$('#btn-save').html('Save Changes');
}
});
});
function readURL(input, id) {
id = id || '#modal-preview';
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(id).attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
$('#modal-preview').removeClass('hidden');
$('#start').hide();
}
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

var SITEURL = '{{URL::to('')}}';

$(document).ready( function () {

$.ajaxSetup({

headers: {

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

}

});

$('#laravel_datatable').DataTable({

processing: true,

serverSide: true,

ajax: {

url: SITEURL + "product-list",

type: 'GET',

columns: [

{data: 'id', name: 'id', 'visible': false},

{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},

{data: 'image', name: 'image', orderable: false},

{ data: 'title', name: 'title' },

{ data: 'product_code', name: 'product_code' },

{ data: 'description', name: 'description' },

{ data: 'created_at', name: 'created_at' },

{data: 'action', name: 'action', orderable: false},

order: [[0, 'desc']]

});

/* When user click add user button */

$('#create-new-product').click(function () {

$('#btn-save').val("create-product");

$('#product_id').val('');

$('#productForm').trigger("reset");

$('#productCrudModal').html("Add New Product");

$('#ajax-product-modal').modal('show');

$('#modal-preview').attr('src', 'https://via.placeholder.com/150');

});

/* When click edit user */

$('body').on('click', '.edit-product', function () {

var product_id = $(this).data('id');

$.get('product-list/' + product_id +'/edit', function (data) {

$('#title-error').hide();

$('#product_code-error').hide();

$('#description-error').hide();

$('#productCrudModal').html("Edit Product");

$('#btn-save').val("edit-product");

$('#ajax-product-modal').modal('show');

$('#product_id').val(data.id);

$('#title').val(data.title);

$('#product_code').val(data.product_code);

$('#description').val(data.description);

$('#modal-preview').attr('alt', 'No image available');

if(data.image){

$('#modal-preview').attr('src', SITEURL +'public/product/'+data.image);

$('#hidden_image').attr('src', SITEURL +'public/product/'+data.image);

}

})

});

$('body').on('click', '#delete-product', function () {

var product_id = $(this).data("id");

if(confirm("Are You sure want to delete !")){

$.ajax({

type: "get",

url: SITEURL + "product-list/delete/"+product_id,

success: function (data) {

var oTable = $('#laravel_datatable').dataTable();

oTable.fnDraw(false);

error: function (data) {

console.log('Error:', data);

}

});

}

});

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

e.preventDefault();

var actionType = $('#btn-save').val();

$('#btn-save').html('Sending..');

var formData = new FormData(this);

$.ajax({

type:'POST',

url: SITEURL + "product-list/store",

data: formData,

cache:false,

contentType: false,

processData: false,

success: (data) => {

$('#productForm').trigger("reset");

$('#ajax-product-modal').modal('hide');

$('#btn-save').html('Save Changes');

var oTable = $('#laravel_datatable').dataTable();

oTable.fnDraw(false);

error: function(data){

console.log('Error:', data);

$('#btn-save').html('Save Changes');

}

});

function readURL(input, id) {

id = id || '#modal-preview';

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$(id).attr('src', e.target.result);

};

reader.readAsDataURL(input.files[0]);

$('#modal-preview').removeClass('hidden');

$('#start').hide();

}

</script>

Next, navigate to resources/views and create image.blade.php file. Then update the following code into your image.blade.php file:

@if($image)
<img id="preview" src="{{ ('public/product/'.$image) }}" alt="Preview" class="form-group hidden" width="100" height="100">
@else
<img id="preview" src="https://via.placeholder.com/150" alt="Preview" class="form-group hidden" width="100" height="100">
@endif

@if($image)

@else

@endif

Step 8 – Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/product-list

1	http://localhost:8000/product-list

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Ajax CRUD with Image Upload Tutorial