Laravel 7.x and 6.x - Preview and Crop Image Before Upload using Ajax

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

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

<?php


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">

<head>

<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() }}">

</head>


<body>

<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>

<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>


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

<div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div>

</div>

</div>


</div>

</div>

</div>


<script type="text/javascript">


$.ajaxSetup({

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) {

resize.croppie('bind',{

url: e.target.result

}).then(function(){

console.log('jQuery bind complete');

});

}

reader.readAsDataURL(this.files[0]);

});


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

resize.croppie('result', {

type: 'canvas',

size: 'viewport'

}).then(function (img) {

$.ajax({

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

type: "POST",

data: {"image":img},

success: function (data) {

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

$("#preview-crop-image").html(html);

}

});

});

});


</script>


</body>

</html>

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

Now you can run example and see..

I hope you found your best....