article

Tuesday, December 20, 2022

Laravel 9 Preview and Crop Image Before Upload using Jquery Ajax

Laravel 9 Preview and Crop Image Before Upload using Jquery Ajax

Download Laravel App

composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=

Create Controller
php artisan make:controller ImageController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller ImageController
app\Http\Controllers\ImageController.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//app\Http\Controllers\ImageController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class ImageController extends Controller
{
    public function imageCreate(){
      return view('Uploadimage');
    }
 
    public function ImageUpload(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('image/'.$image_name);
 
        file_put_contents($path, $image);
 
        return response()->json(['status'=>true]);
    }
}
create a blade file Uploadimage.blade.php
resources/views/Uploadimage.blade.php

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/

jquery
https://www.jsdelivr.com/package/npm/jquery

Croppie
https://foliotek.github.io/Croppie/
https://github.com/foliotek/croppie
https://cdnjs.com/libraries/croppie
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
//resources/views/Uploadimage.blade.php
<html lang="en">
<head>
  <title>Laravel 9 Preview and Crop Image Before Upload using Jquery Ajax</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.js"></script>
  <meta name="token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
    <div class="card" style="margin-top:20px;">
    <div class="card-header">
        Laravel 9 Preview and Crop Image Before Upload using Jquery Ajax
    </div>
    <div class="card-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 for crop:</strong>
                <input type="file" id="images" name="image">
                <button class="btn btn-primary btn-block image-upload" style="margin-top:2%">Upload Image</button>
            </div>
            <div class="col-md-4">
                <div id="show-crop-image" style="background:#e2e2e2;width:400px;padding:60px 60px;height:400px;"></div>
            </div>
        </div>
    </div>
    </div>
</div>
   <script type="text/javascript">
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
      }
    });
 
    var resize = $('#upload-demo').croppie({
        enableExif: true,
        enableOrientation: true,   
        viewport: {
            width: 300,
            height: 300,
            type: 'circle'
        },
 
        boundary: {
            width: 300,
            height: 300
        }
    });
 
    $('#images').on('change', function () {
      var reader = new FileReader();
        reader.onload = function (e) {
          resize.croppie('bind',{
            url: e.target.result
          }).then(function(){
            console.log('success bind image');
          });
 
        }
        reader.readAsDataURL(this.files[0]);
    });
 
    $('.image-upload').on('click', function (ev) {
      resize.croppie('result', {
        type: 'canvas',
        size: 'viewport'
 
      }).then(function (img) {
        $.ajax({
          url: '{{ route('save') }}',
          type: "POST",
          data: {"image":img},
          success: function (data) {
            html = '<img src="' + img + '" />';
            $("#show-crop-image").html(html);
          }
        });
      });
    });
 </script>
</body>
</html>
Routes
routes/web.php
?
1
2
3
4
5
6
7
8
9
10
11
12
//routes/web.php
<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
 
Route::get('/', function () {
    return view('welcome');
});
 
Route::get('crop-image', [ImageController::class, 'imageCreate']);
Route::post('crop-image-store', [ImageController::class, 'ImageUpload'])->name('save');
Run C:\xampp\htdocs\laravel\my-app>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
Posted by ednalan at 9:56 PM . Under .

Related Post