Laravel 8 Image Crop & Upload using jQuery and Ajax Example

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

In this Laravel 8 Image Crop & Upload using jQuery and Ajax Example tutorial I’ll show you how to upload and crop image using jquery ajax in laravel 8. In this tutorial you will learn to upload and 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 8 using jquery ajax.

Table Of Contents−

Laravel 8 Image Crop & Upload using jQuery and Ajax Example

In this step by step tutorial I will demonstrate you how to upload and crop image using jQuery in laravel 8. Please follow the instruction given below:

Step 1 – Install Laravel 8 App

Step 2 – Connecting App to Database
Step 3 – Create Crop Image Migration & Model
Step 4 – Add Routes For Crop Image Upload

Step 5 – Create Crop Image Controller Using Command
Step 6 – Create Crop Image Upload Blade View
Step 7 – Make Upload Folder

Step 8 – Run Development Server
Step 9 – Test This App

Step 1 – Install Laravel 8 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 – 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 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 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\Models\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\Models\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

1	http://localhost:8000/image-crop

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Image Crop & Upload using jQuery and Ajax Example