Laravel 11 Ajax CRUD Image Upload Tutorial

Laravel 11 Ajax CRUD Image Upload Tutorial

To create laravel 11 Ajax crud with an image upload app, You need to create a controller and method to perform crud operation from the database table, and create forms to send data to the server using jQuery ajax, and then define routes to handle crud operation requests in laravel 11 applications.

In this example guide, we will create a task Ajax CRUD application in Laravel 11 with image upload functionality for managing tasks between the app and the database, this application will allow users to create, read, update, and delete tasks on the database table without reloading the web page.

To develop ajax crud with image upload operation application in laravel 11

Here are steps:

Step 1 – Download New Laravel 11 Application

Open cmd or terminal window and run the following command to download and install new laravel 11 setup into your server:

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

Step 2 – Initialize Database with Application

Open and edit .env file from laravel application root folder, to configure the database in it; something like this:


Step 3 – Create Migration And Model

Open cmd or terminal window and navigate to laravel 11 project folder by cd project-name command, and then create model and migration file using php artisan make:model Task -m command:

cd blog
php artisan make:model Task -m

Add the fields name in create_tasks_table.php file, which is database/migrations/ folder; something like this:

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

Run migration with the help of php artisan migrate command to create tables in select database:

php artisan migrate

Step 4 – Install Yajra DataTables Package

Run the following command on cmd or terminal window to install latest yajra dataTables package, which is help to show records on HTML table without page refresh:

composer require yajra/laravel-datatables-oracle

Step 5 – Add Routes

Open web.php file from routes folder, and add ajax crud image upload routes in it; something like this:

use App\Http\Controllers\TaskController;

Route::get('tasks', [TaskController::class, 'index']);
Route::get('taskEdit/{id}/', [TaskController::class, 'edit']);
Route::post('taskStore', [TaskController::class, 'store']);
Route::get('taskDelete/{id}', [TaskController::class, 'destroy']);

Step 6 – Create Controller and Methods

Run php artisan make:controller TaskController command to create controller file, which is help to perform crud operations from database:

php artisan make:controller TaskController

Create some methods in TaskController.php, which are used to perform crud operations from database; something like this:

namespace App\Http\Controllers;
use App\Models\Task;
use Illuminate\Http\Request;
use Response;
use DataTables;
class TaskController extends Controller
    public function index()
        if(request()->ajax()) {
            return datatables()->of(Task::select('*'))
            ->addColumn('action', 'task-action')
            ->addColumn('image', 'image')
        return view('tasks');
    public function store(Request $request)
            'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        $taskId = $request->task_id;
        if ($files = $request->file('image')) {
           //delete old file
           //insert new file
           $destinationPath = 'public/task/'; // upload path
           $profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
           $files->move($destinationPath, $profileImage);
           $image = "$profileImage";
        $task = Task::find($taskId) ?? new Task();

        // Set the individual attributes
        $task->id = $taskId;
        $task->title = $request->title;
        $task->task_code = $request->task_code;
        $task->description = $request->description;
        $task->image = $image;

        // Save the task
        return Response::json($task);
    public function edit($id)
        $where = array('id' => $id);
        $task  = Task::where($where)->first();
        return Response::json($task);
    public function destroy($id) 
        $data = Task::where('id',$id)->first(['image']);
        $task = Task::where('id',$id)->delete();
        return Response::json($task);

Step 7 – Create Blade View

Create two blade views file, which are used to display create, edit, delete button and task list on web page.

Go to resources/views folder and create task-action.blade.php file, and create delete and edit button in it something like this:

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

And create tasks.blade.php file in resources/views/ folder and create HTML table into it to show list of tasks records with add, edit, and delete button and also add jQuery ajax code in it; something like this:

<!DOCTYPE html>
<html lang="en">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 11 Ajax CRUD Image Upload Tutorial -</title>
<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src=""></script>
<link  href="" rel="stylesheet">
<script src=""></script>
<div class="container" style="margin-top: 1%;">
<h1>Laravel Ajax CRUD Image Upload Tutorial -</h1>
<a href="javascript:void(0)" class="btn btn-info ml-3" id="create-new-task">Add New</a>
<table class="table table-bordered table-striped" id="laravel_datatable">
<th>S. No</th>
<th>Task Code</th>
<th>Created at</th>
<div class="modal fade" id="ajax-task-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="taskCrudModal"></h4>
<div class="modal-body">
<form id="taskForm" name="taskForm" class="form-horizontal" enctype="multipart/form-data">
<input type="hidden" name="task_id" id="task_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 class="form-group">
<label for="name" class="col-sm-2 control-label">Task Code</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="task_code" name="task_code" placeholder="Enter Tilte" value="" maxlength="50" required="">
<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 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">
<img id="modal-preview" src="" 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
<div class="modal-footer">
var SITEURL = '{{URL::to('')}}'+'/';
$(document).ready( function () {
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
processing: true,
serverSide: true,
ajax: {
url: SITEURL + "tasks",
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: 'task_code', name: 'task_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-task').click(function () {
$('#taskCrudModal').html("Add New task");
$('#modal-preview').attr('src', '');
/* When click edit user */
$('body').on('click', '.edit-task', function () {
var task_id = $(this).data('id');
$.get('taskEdit/' + task_id, function (data) {
$('#taskCrudModal').html("Edit Task");
$('#modal-preview').attr('alt', 'No image available');
$('#modal-preview').attr('src', SITEURL +'public/task/'+data.image);
$('#hidden_image').attr('src', SITEURL +'public/task/'+data.image);
$('body').on('click', '#delete-task', function () {
var task_id = $(this).data("id");
if(confirm("Are You sure want to delete !")){
type: "get",
url: SITEURL + "taskDelete/"+task_id,
success: function (data) {
var oTable = $('#laravel_datatable').dataTable(); 
error: function (data) {
console.log('Error:', data);
$('body').on('submit', '#taskForm', function (e) {
var actionType = $('#btn-save').val();
var formData = new FormData(this);
url: SITEURL + "taskStore",
data: formData,
contentType: false,
processData: false,
success: (data) => {
$('#btn-save').html('Save Changes');
var oTable = $('#laravel_datatable').dataTable();
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) {

Now, create image.blade.php file in resources/views folder to show image in tasks list; something like this:

<img id="preview" src="{{ ('public/task/'.$image) }}" alt="Preview" class="form-group hidden" width="100" height="100">
<img id="preview" src="" alt="Preview" class="form-group hidden" width="100" height="100">

Step 8 – Run and Test Application

Run php artisan serve command to start application server:

php artisan storage:link
php artisan serve

Open browser with


We hope you have learned how to create AJAX CRUD operation application with image upload feature using jQuery AJAX dataTables js in laravel 11 apps.

Recommended Guides

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


Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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