Laravel Ajax Image Crop and Upload using jQuery

In this tutorial you will learn about the Laravel Ajax Image Crop and Upload using jQuery and its application with practical example.

In this Laravel Ajax Image Crop and Upload using jQuery tutorial I’ll show you how to upload in crop image using jquery ajax in laravel. In this tutorial you will learn to upload in crop image before upload using jquery ajax in laravel. In this step by step guide I will demonstrate you to upload and crop image in laravel using jquery ajax.

Table Of Contents−

Laravel Ajax Image Crop and Upload using jQuery

Step 1: Download Laravel App
Step 2: Add Database Details

Step 3: Create Crop Image Migration & Model
Step 4: Add Routes For Crop Image Upload
Step 5: Create Crop Image Controller File Using Command

Step 6: Create Crop Image Upload Blade View
Step 7: Make Upload Folder
Step 8: Run Development Server

Step 1: Download Laravel App

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: Add Database Details

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 Crop Image Migration & Model

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

php artisan make:model Image -m

1	php artisan make:model Image -m

Now, go to database/migrations folder and open create_images_table.php. Then put the following code into create_images_table.php:

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateGalleriesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->increments('id');

$table->string('title');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('images');

}

Now run the following command to migrate the table into your select database:

php artisan migrate

1	php artisan migrate

Step 4: Add Routes For Crop Image Upload

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('image-crop', 'CropImageUploadController@index');
 
Route::post('save-crop-image', 'CropImageUploadController@store');

Route::get('image-crop', 'CropImageUploadController@index');

Route::post('save-crop-image', 'CropImageUploadController@store');

Step 5: Create Crop Image Controller File Using Command

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

php artisan make:controller CropImageUploadController

1	php artisan make:controller CropImageUploadController

Now go to app/http/controllers/ folder and open CropImageUploadController.php. Then put the following file uploading methods into your CropImageUploadController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Image;
 
class CropImageUploadController extends Controller
{
    public function index()
    {
     return view('image-crop');
    }
 
    public function store(Request $request)
    {
        $folderPath = public_path('upload/');
 
        $image_parts = explode(";base64,", $request->image);
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];
        $image_base64 = base64_decode($image_parts[1]);
 
        $imageName = uniqid() . '.png';
 
        $imageFullPath = $folderPath.$imageName;
 
        file_put_contents($imageFullPath, $image_base64);
 
         $saveFile = new Image;
         $saveFile->title = $imageName;
         $saveFile->save();
    
        return response()->json(['success'=>'Crop Image Saved/Uploaded Successfully using jQuery and Ajax In Laravel']);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Image;

class CropImageUploadController extends Controller

{

public function index()

{

return view('image-crop');

}

public function store(Request $request)

{

$folderPath = public_path('upload/');

$image_parts = explode(";base64,", $request->image);

$image_type_aux = explode("image/", $image_parts[0]);

$image_type = $image_type_aux[1];

$image_base64 = base64_decode($image_parts[1]);

$imageName = uniqid() . '.png';

$imageFullPath = $folderPath.$imageName;

file_put_contents($imageFullPath, $image_base64);

$saveFile = new Image;

$saveFile->title = $imageName;

$saveFile->save();

return response()->json(['success'=>'Crop Image Saved/Uploaded Successfully using jQuery and Ajax In Laravel']);

}

Step 6: Create Crop Image Upload Blade View

In this step, create a blade view file named image-crop.blade.php. Go to /resources/views and create one file name image-crop.blade.php. Then put the following code into your image-crop.blade.php file:

<html>  
<head>  
<title>Crop Image Using jQuery Croppie with Ajax in Laravel</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.slim.min.js"></script
>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
</head>  
<body>  
<div class="container mt-5">
<div class="card">
<div class="card-header">
Crop Image Using jQuery Croppie with Ajax in Laravel
</div>
<div class="card-body">
<input type="file" name="before_crop_image" id="before_crop_image" accept="image/*" />
</div>
</div>
</div>
</body>  
</html>
<div id="imageModel" class="modal fade bd-example-modal-lg" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Crop & Resize Upload Image in PHP with Ajax</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br/>
<button class="btn btn-success crop_image">Save</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>  
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'square' //circle
},
boundary:{
width:300,
height:300
}    
});
$('#before_crop_image').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#imageModel').modal('show');
});
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"{{url('save-crop-image')}}",  
type:'POST',
data: {'_token': $('meta[name="csrf-token"]').attr('content'), 'image': response},
success:function(data){
$('#imageModel').modal('hide');
alert('Crop image has been uploaded');
}
})
});
});
});  
</script>

<html>

<head>

<title>Crop Image Using jQuery Croppie with Ajax in Laravel</title>

</head>

<body>

Crop Image Using jQuery Croppie with Ajax in Laravel

</div>

</div>

</body>

</html>

<h4 class="modal-title">Crop & Resize Upload Image in PHP with Ajax</h4>

</div>

</div>

<br />

<br/>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

$(document).ready(function(){

$image_crop = $('#image_demo').croppie({

enableExif: true,

viewport: {

width:200,

height:200,

type:'square' //circle

boundary:{

width:300,

height:300

}

});

$('#before_crop_image').on('change', function(){

var reader = new FileReader();

reader.onload = function (event) {

$image_crop.croppie('bind', {

url: event.target.result

}).then(function(){

console.log('jQuery bind complete');

});

}

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

$('#imageModel').modal('show');

});

$('.crop_image').click(function(event){

$image_crop.croppie('result', {

type: 'canvas',

size: 'viewport'

}).then(function(response){

$.ajax({

url:"{{url('save-crop-image')}}",

type:'POST',

data: {'_token': $('meta[name="csrf-token"]').attr('content'), 'image': response},

success:function(data){

$('#imageModel').modal('hide');

alert('Crop image has been uploaded');

}

})

});

</script>

Step 7: Make Upload Folder

Now, create one folder name upload inside public directory.

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/image-crop
OR hit in browser
http://localhost/blog/public/image-crop

http://localhost:8000/image-crop

OR hit in browser

http://localhost/blog/public/image-crop

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel Ajax Image Crop and Upload using jQuery