---
description: >-
  https://www.itsolutionstuff.com/post/laravel-5-ajax-crop-image-before-upload-using-using-croppie-pluginexample.html
---

# Laravel - Ajax crop image before upload using using croppie plugin

## Laravel - Ajax crop image before upload using using croppie plugin

By Hardik Savani June 24, 2017 Category : PHP Laravel Bootstrap jQuery Ajax![](https://a.vdo.ai/core/assets/img/cross.svg)PauseUnmuteLoaded: 3.10%Fullscreen[![VDO.AI](https://a.vdo.ai/core/assets/img/logo.svg)](https://vdo.ai/?utm_medium=video\&utm_term=itsolutionstuff.com\&utm_source=vdoai_logo)In this article i will let you know jquery ajax crop image before upload using croppie plugin in laravel 5, laravel 6, laravel 7, laravel 8 and laravel 9 application.

After several feedback and request from viewer for post of laravel 5 crop image upload example, i decide to find good plugin and post for ajax crop image in laravel 5 application, Last few days ago i already posted for image uploading with laravel like [Ajax Image Upload Example With Validation in Laravel](http://itsolutionstuff.com/post/ajax-image-upload-example-with-validation-in-php-laravel-frameworkexample.html), [Laravel 5 multiple images uploading using dropzone js example with demo](http://itsolutionstuff.com/post/laravel-5-multiple-images-uploading-using-dropzonejs-example-with-demoexample.html) etc. in todays we almost require image upload for profile or product etc. So it would always perfect if you do something best using bootstrap jquery plugin.

In this example we will use croppie plugin for crop image before upload. croppie plugin is perfect fit for profile image upload function. croppie plugin provide circle and square crop photo and several others option for settings.

So, after you followed all step you will get layout as like bellow, so let's follow bellow step and got example:

**Layout:**

![](https://www.itsolutionstuff.com/upload/laravel-5-crop-image-before-upload.png)

**Step 1: Add New Routes**

In first step, we will add two new routes in our laravel application. So you have to add "image-crop\[GET]" and "image-crop\[POST]" routes in web.php file as like bellow:

**routes/web.php**

```
Route::get('image-crop', 'ImageController@imageCrop');Route::post('image-crop', 'ImageController@imageCropPost');
```

**Step 2: Create New Controller**

In second step we will create new ImageController for two new routes request method. In this controller we will add two method imageCrop() and imageCropPost(). So you have to simply get bellow code and put on your controller:

**app/Http/Controllers/ImageController.php**

```
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;class ImageController extends Controller{    /**     * Show the application dashboard.     *     * @return \Illuminate\Http\Response     */    public function imageCrop()    {        return view('imageCrop');    }    /**     * Show the application dashboard.     *     * @return \Illuminate\Http\Response     */    public function imageCropPost(Request $request)    {        $data = $request->image;        list($type, $data) = explode(';', $data);        list(, $data)      = explode(',', $data);        $data = base64_decode($data);        $image_name= time().'.png';        $path = public_path() . "/upload/" . $image_name;        file_put_contents($path, $data);        return response()->json(['success'=>'done']);    }}
```

Read Also: [Crop, Resize, Frames etc on selected image in php using Aviary](https://www.itsolutionstuff.com/post/crop-resize-frames-etc-on-selected-image-in-php-using-aviaryexample.html)

**Step 3: Create New View File**

In this Last step, we require to create imageCrop.blade.php file and we write code for crop image using croppie plugin. So you have to simply add bellow code on following path:

**resources/views/imageCrop.blade.php**

```
<html lang="en"><head>  <title>Laravel - jquery ajax crop image before upload using croppie plugins</title>  <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>  <script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>  <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">  <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">  <meta name="csrf-token" content="{{ csrf_token() }}"></head><body><div class="container">	<div class="panel panel-default">	  <div class="panel-heading">Laravel crop image before upload using croppie plugins</div>	  <div class="panel-body">	  	<div class="row">	  		<div class="col-md-4 text-center">				<div id="upload-demo" style="width:350px"></div>	  		</div>	  		<div class="col-md-4" style="padding-top:30px;">				<strong>Select Image:</strong>				<br/>				<input type="file" id="upload">				<br/>				<button class="btn btn-success upload-result">Upload Image</button>	  		</div>	  		<div class="col-md-4" style="">				<div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>	  		</div>	  	</div>	  </div>	</div></div><script type="text/javascript">$.ajaxSetup({headers: {    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});$uploadCrop = $('#upload-demo').croppie({    enableExif: true,    viewport: {        width: 200,        height: 200,        type: 'circle'    },    boundary: {        width: 300,        height: 300    }});$('#upload').on('change', function () { 	var reader = new FileReader();    reader.onload = function (e) {    	$uploadCrop.croppie('bind', {    		url: e.target.result    	}).then(function(){    		console.log('jQuery bind complete');    	});    }    reader.readAsDataURL(this.files[0]);});$('.upload-result').on('click', function (ev) {	$uploadCrop.croppie('result', {		type: 'canvas',		size: 'viewport'	}).then(function (resp) {		$.ajax({			url: "/image-crop",			type: "POST",			data: {"image":resp},			success: function (data) {				html = '<img src="' + resp + '" />';				$("#upload-demo-i").html(html);			}		});	});});</script></body></html>
```

After followed successfully you must have to create **"upload"** folder with full permissions, After that you can quick run by following command:

```
php artisan serve
```

Now you can open bellow url on your browser:

Read Also: [Ajax Image Upload using PHP and jQuery Example from scratch](https://www.itsolutionstuff.com/post/ajax-image-upload-using-php-and-jquery-example-from-scratchexample.html)

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

I hope it can help you...
