article

Saturday, April 15, 2023

Laravel 10 Crop and Resize Upload Image Ajax | Bootstrap 5 Modal

Laravel 10 Crop and Resize Upload Image Ajax | Bootstrap 5 Modal

Download Laravel App

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

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 AuthController
php artisan make:controller AuthController
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller CropImageUploadController
app\Http\Controllers\CropImageUploadController.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
30
31
32
33
34
35
36
37
38
//app\Http\Controllers\CropImageUploadController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Image;
 
class CropImageUploadController extends Controller
{
    public function index()
    {
     return view('cropimage');
    }
  
    public function store(Request $request)
    {
        $folderPath = public_path('upload/'); //create folder upload public/upload
  
        $image_parts = explode(";base64,", $request->image);
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];
        $image_base64 = base64_decode($image_parts[1]);
  
        $imageName = uniqid() . '.png';
  
        $imageFullPath = $folderPath.$imageName;
  
        file_put_contents($imageFullPath, $image_base64);
  
         $saveFile = new Image;
         $saveFile->title = $imageName;
         $saveFile->save();
     
        return response()->json(['success'=>'Crop Image Saved/Uploaded Successfully']);
    }
}
Database Migration

C:\xampp\htdocs\laravel\laravel10project>php artisan make:model Image -m

database/migrations/create_images_table.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//database/migrations/create_images_table.php
<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
return new class extends Migration
{
    public function up(): void
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->timestamps();
        });
    }
 
    public function down(): void
    {
        Schema::dropIfExists('images');
    }
};
run this migration
C:\xampp\htdocs\laravel\laravel10project>php artisan migrate

Create Blade View
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

resources/views/cropimage.blade.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
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
89
90
91
92
93
94
//resources/views/cropimage.blade.php
<html> 
<head> 
<title>Laravel 10 Crop and Resize Upload Image Ajax | Bootstrap 5 Modal</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() }}">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head> 
<body> 
<div class="container mt-5">
    <div class="card">
        <div class="card-header">
        Laravel 10 Crop and Resize Upload Image Ajax
        </div>
        <div class="card-body">
            <input type="file" name="before_crop_image" id="before_crop_image" accept="image/*" />
        </div>
    </div>
</div>
 
<div id="imageModel" class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Laravel 10 Crop and Resize Upload Image Ajax</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      <div id="image_demo" style="width:350px; margin-top:30px"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary crop_image">Save changes</button>
      </div>
    </div>
  </div>
</div>
 
<script> 
$(document).ready(function(){
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
      }
    });
     
    $image_crop = $('#image_demo').croppie({
        enableExif: true,
        viewport: {
            width:200,
            height:200,
            type:'square' //circle
        },
        boundary:{
            width:300,
            height:300
        }   
    });
    $('#before_crop_image').on('change', function(){
        var reader = new FileReader();
        reader.onload = function (event) {
            $image_crop.croppie('bind', {
                url: event.target.result
            }).then(function(){
                console.log('jQuery bind complete');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#imageModel').modal('show');
       
    });
    $('.crop_image').click(function(event){ alert("Success");
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response){
            $.ajax({
                url: '{{ route('store') }}',
                type:'POST',
                data: {'_token': $('meta[name="csrf-token"]').attr('content'), 'image': response},
                success:function(data){
                    $('#imageModel').modal('hide');
                    alert('Crop image has been uploaded');
                }
            })
        });
    });
}); 
</script>
</body> 
</html>
Define Route routes/web.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//routes/web.php
<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CropImageUploadController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
 
Route::get('/', function () {
    return view('welcome');
});
 
Route::get('/crop-image',[CropImageUploadController::class,'index'])->name('crop-image');
Route::post('/store',[CropImageUploadController::class,'store'])->name('store');
Run C:\xampp\htdocs\laravel\laravel10project>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
Posted by ednalan at 6:16 PM . Under .

Related Post