Laravel 5.6 - Preview and Crop Image Before Upload using Ajax

A few days ago i was working on my php laravel 5.6 new project. i exactly remember i was working on user profile page and i need to add image upload on my user profile page. but i know image uploading is simple with laravel 5.6, but i also need to add crop and preview image before save image in folder.

I was thinking how can i do it easily, i decide to do with my own jquery but after write some code. i thought it will take time and need to write large amount of code. but after some time, finally decide to use any one jquery plugin i can done crop image and also show preview of profile image. After google search i found Croppie plugin. so i checked website of Croppie plugin and i done to with it.

So you can in this tutorial, i will show you how we can crop image before upload in laravel. so let's follow bellow few step and get example.

Step 1: Create Routes In web.php

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

Route::post('crop-image', ['as'=>'upload.image','uses'=>'ImageController@uploadImage']);

Step 2: Create ImageController Controller


namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller


public function index()


return view('imageUpload');


public function uploadImage(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('upload/'.$image_name);

file_put_contents($path, $image);

return response()->json(['status'=>true]);



Step 3: Create imageUpload.blade.php Blade

<html lang="en">


<title>Laravel 5.6 - Preview and Crop Image Before Upload using Ajax- HDTuto.com</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>

<meta name="csrf-token" content="{{ csrf_token() }}">



<div class="container">

<div class="panel panel-info">

<div class="panel-heading">Laravel 5.6 - Preview and Crop Image Before Upload using Ajax- HDTuto.com</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'


boundary: {

width: 300,

height: 300



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

var reader = new FileReader();

reader.onload = function (e) {


url: e.target.result


console.log('jQuery bind complete');





$('.upload-image').on('click', function (ev) {

resize.croppie('result', {

type: 'canvas',

size: 'viewport'

}).then(function (img) {


url: "{{route('upload.image')}}",

type: "POST",

data: {"image":img},

success: function (data) {

html = '<img src="' + img + '" />';









You should create "upload" folder in your public directory.

Now you can run example and see..

I hope you found your best....

June 24, 2018 | Category : PHP Laravel Bootstrap JQuery JQuery Plugin Ajax Laravel 5 Laravel 5.5 Laravel 5.6
Related Posts