Laravel 7 Ajax Crud with Image Upload Example

In this tutorial you will learn about the Laravel 7 Ajax Crud with Image Upload Example and its application with practical example.

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

Table Of Contents−

Laravel 7 Ajax Crud with Image Upload Example

Step 1: Install Fresh laravel Setup
Step 2: Set database Credentials

Step 3: Create Migration And Model
Step 4: Install Yajra DataTables In App
Step 5: Add Route

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 using the below command

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

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

Step 2: Set database Credentials

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

Navigate database/migrations/ and open create_products_table.php file. Then update 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 the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

This command will create tables in your database.

Next, Navigate to App directory and open Product.php file and then update the following code to into Product.php file as follow:

app\Product.php

<?php
 
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Product extends Model
{
   protected $fillable = ['title','product_code','description','image'];
 
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

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 successfully Install Yajra Datatables Packages in your laravel application. Next step, open config/app.php file and add service provider and alias

config/app.php
 
 
 'providers' => [
 
 
 Yajra\Datatables\DatatablesServiceProvider::class,
 ],
 
 
 'aliases' => [
 
 
 'Datatables' => 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

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

Route::get('product-list', 'ProductController@index');

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

Route::post('product-list/store', 'ProductController@store');

Route::get('product-list/delete/{id}', 'ProductController@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:

In Product Controller, you need to create some methods as follow:

Index()
Store()
Edit()
Destroy()
Index() method

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 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');

}

Store() Method

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 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);

}

Edit() Method

public function edit($id)
{   
    $where = array('id' => $id);
    $product  = Product::where($where)->first();
  
    return Response::json($product);
}

public function edit($id)

{

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

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

return Response::json($product);

}

Delete() Method

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);
}

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);

}

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;
   
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;

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
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

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 7 Ajax Crud with Image Upload Example