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