Laravel 8 Cropper Js - Crop Image Before Upload




Laravel 8 Cropper Js - Crop Image Before Upload

Hi Dev,

Today i will explained laravel 8 cropper Js - crop image before upload laravel 8 app using copper js library of jQuery.

Step 1 – Install Laravel 8 Project

First of all, execute the following command on terminal to download or install new laravel project to implement laravel 8 crop image before upload using cropper js:

Step 2 – Connecting Database to Project

In this step, open .env file and add the database details in .env file:





DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3 – Migration & Model

In this step, execute the following command to create modeland migration file:

php artisan make:model Picture -m



use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePicturesTable extends Migration



* Run the migrations.


* @return void


public function up()


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







* Reverse the migrations.


* @return void


public function down()





And execute the following command to create tables into your database:

php artisan migrate

In this step, add routes in web.php file. So navigate to routes folder and open web.php file. And add the following routes into web.php file:


use App\Http\Controllers\CropImageController;

Route::get('crop-image-upload', [CropImageController::class, 'index']);

Route::post('crop-image-upload', [CropImageController::class, 'uploadCropImage']);

In this step, execute the following command to create a controller name CropImageController.php:

php artisan make:controller CropImageController



namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Picture;

class CropImageController extends Controller


public function index()


return view('crop-image-upload');


public function uploadCropImage(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 Picture;

$saveFile->name = $imageName;


return response()->json(['success'=>'Crop Image Uploaded Successfully']);



Create a blade view file named crop-image-upload.blade.php file. So navigate to resources/views folder and create one file name crop-image-upload.blade.php


<!DOCTYPE html>



<title>Laravel 8 Cropper js - Crop Image Before Upload -</title>

<meta name="_token" content="{{ csrf_token() }}">

<link rel="stylesheet" href=""></script>

<link rel="stylesheet" href=""/>

<script src=""></script>

<script src=""></script>

<script src=""></script>

<script src=""></script>


<style type="text/css">





font-weight: bold;



img {

display: block;

max-width: 100%;


.preview {

text-align: center;

overflow: hidden;

width: 160px;

height: 160px;

margin: 10px;

border: 1px solid red;








padding:50px 30px;



max-width: 1000px !important;




<div class="container">

<div class="row">

<div class="col-md-8 offset-md-2 section text-center">

<h1>Laravel 8 Cropper Js - Crop Image Before Upload -</h1>

<input type="file" name="image" class="image">




<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">

<div class="modal-dialog modal-lg" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="modalLabel">Laravel 8 Cropper Js - Crop Image Before Upload -</h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">×</span>



<div class="modal-body">

<div class="img-container">

<div class="row">

<div class="col-md-8">

<img id="image" src="">


<div class="col-md-4">

<div class="preview"></div>





<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

<button type="button" class="btn btn-primary" id="crop">Crop</button>








var $modal = $('#modal');

var image = document.getElementById('image');

var cropper;

$("body").on("change", ".image", function(e){

var files =;

var done = function (url) {

image.src = url;



var reader;

var file;

var url;

if (files && files.length > 0) {

file = files[0];

if (URL) {


} else if (FileReader) {

reader = new FileReader();

reader.onload = function (e) {







$modal.on('', function () {

cropper = new Cropper(image, {

aspectRatio: 1,

viewMode: 3,

preview: '.preview'


}).on('', function () {


cropper = null;



canvas = cropper.getCroppedCanvas({

width: 160,

height: 160,


canvas.toBlob(function(blob) {

url = URL.createObjectURL(blob);

var reader = new FileReader();


reader.onloadend = function() {

var base64data = reader.result;


type: "POST",

dataType: "json",

url: "crop-image-upload",

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

success: function(data){



alert("Crop image successfully uploaded");









Finally, Execute the following command to start development server to run your laravel crop image before upload using cropper js.

php artisan serve

Now you are ready to run our example so run bellow command.


#Laravel 8

#Laravel 7