Site Admin
Site Admin Founder of MeaningArticles

Crop and upload an image with Croppie plugin using jQuery Ajax in Laravel

Hello Dev.

While developing image gallary application, you need to get thumbnail or crop of image. In this Article, we will going to learn how to crop image using jQuery croppie plugin and upload in Laravel.

First of Create new Laravel project. We will start with adding routes to routes/web.php file.

Route::get('image/crop', 'CroppieController@index')->name('Croppie.index');

Route::post('image/crop', 'CroppieController@submit')->name('Croppie.submit');


After that create CroppieController using below command.

php artisan make:controller CroppieController


Now open CroppieController file and add below methods.


namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CropImageController extends Controller
     public function index()
      return view('croppie');
     public function submit(Request $request)
        $image = $request->image;

        list($type, $image) = explode(';', $image);
        list(, $image) = explode(',', $image);
        $image = base64_decode($image);
        $image_name= time().'.png';
        $path = public_path('uploads/'.$image_name);

        file_put_contents($path, $image);
        return response()->json(['status' => true]);


In the last stage, create blade file resource/views/croppie.blade.php

<html lang="en">
	<title>Laravel PHP - Cropping and uploading an image with Croppie plugin using jQuery Ajax </title>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" href="">
	<script src=""></script>
	<script src=""></script>
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<div class="container">
		<div class="panel panel-info">
			<div class="panel-heading">Laravel PHP - Cropping and uploading an image with Croppie plugin using jQuery Ajax</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-md-4 text-center">
						<div id="upload-demo"></div>
					<div class="col-md-4" style="padding:5%;">
						<strong>Select image to crop:</strong>
						<input type="file" id="image">
						<button class="btn btn-primary btn-block upload-image" style="margin-top:2%">Upload Image</button>
					<div class="col-md-4">
						<div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div>

	<script type="text/javascript">
			headers: {
			    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

		var resize = $('#upload-demo').croppie({
		    enableExif: true,
		    enableOrientation: true,    
		    viewport: {
		        width: 200,
		        height: 200,
		        type: 'circle' //square
		    boundary: {
		        width: 300,
		        height: 300

		$('#image').on('change', function () { 
		  var reader = new FileReader();
		    reader.onload = function (e) {
		        console.log('jQuery bind complete');

		$('.upload-image').on('click', function (ev) {
		  resize.croppie('result', {
		    type: 'canvas',
		    size: 'viewport'
		  }).then(function (img) {
		      url: "{{ route('Croppie.submit') }}",
		      type: "post",
		      data: {"image":img},
		      success: function (data) {
		        html = '<img src="' + img + '" />';


Now everything is ready, I hope it can help you, thanks for visit my articles if you like my article then share with your friend and on social platform.