Image crop and upload using jquery with laravel ajax. Here, we show you how to crop image before upload using jQuery croppie with laravel ajax.
Laravel Crop Image using jQuery Croppie Before Upload
Use the below steps and crop image before save/upload using jQuery croppie in laravel with ajax:
- Step 1: Download Laravel App
- Step 2: Add Database Details
- Step 3: Create Crop Image Migration & Model
- Step 4: Add Routes For Crop Image Upload
- Step 5: Create Crop Image Controller File Using Command
- Step 6: Create Crop Image Upload Blade View
- Step 7: Make Upload Folder
- Step 8: Run Development Server
Step 1: Download Laravel App
First of all, open your terminal and run the following command to install or download laravel app:
cd xampp\htdocs Then composer create-project --prefer-dist laravel/laravel Blog
Step 2: Add Database Details
In this step, Navigate to your downloaded laravel app root directory and open .env file. Then add your database details in .env file, as follow:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password hereStep 3: Create Crop Image Migration & Model
In this step, create one model and migration file to create crop image table. Where, you can store crop image using migration and model. So, open a command prompt and run the following command:
php artisan make:model Image -mAfter that, Navigate to database/migrations folder and open create_images_table.php. Then update the following code into create_images_table.php:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateGalleriesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
}
Now, open again cmd and run the following command to migrate the table into your select database:
php artisan migrate
Step 4: Add Routes For Crop Image Upload
In this step, Navigate to the /routes folder and open web.php file. Then update the following routes into your web.php file:
Route::get('image-crop', 'CropImageUploadController@index');
Route::post('save-crop-image', 'CropImageUploadController@store');
Step 5: Create Crop Image Controller File Using Command
In this step, open your terminal and run the following command to create ajax file upload controller file:
php artisan make:controller CropImageUploadController
Next, Navigate to app/http/controllers/ folder and open CropImageUploadController.php. Then add the following file uploading methods into your CropImageUploadController.php file:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Image;
class CropImageUploadController extends Controller
{
public function index()
{
return view('image-crop');
}
public function store(Request $request)
{
$folderPath = public_path('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 using jQuery and Ajax In Laravel']);
}
}
Step 6: Create Crop Image Upload Blade View
In this step, create one blade view file named image-crop.blade.php.
Now, navigate /resources/views and create one file name image-crop.blade.php. Then update the following code into your image-crop.blade.php file:
<html>
<head>
<title>Crop Image Using jQuery Croppie with Ajax in Laravel</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script
>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
</head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header">
Crop Image Using jQuery Croppie with Ajax in Laravel
</div>
<div class="card-body">
<input type="file" name="before_crop_image" id="before_crop_image" accept="image/*" />
</div>
</div>
</div>
</body>
</html>
<div id="imageModel" class="modal fade bd-example-modal-lg" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Crop & Resize Upload Image in PHP with Ajax</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br/>
<button class="btn btn-success crop_image">Save</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$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){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"{{url('save-crop-image')}}",
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>
Step 7: Make Upload Folder
Now, open public directory and create one folder name upload.
Step 8: Run Development Server
Finally, run the following command to start the development server for your crop and resize image before upload laravel app:
php artisan serve If you want to run the project diffrent port so use this below command php artisan serve --port=8080
Now, open your browser and hit the following URLs into it:
http://localhost:8000/image-crop OR hit in browser http://localhost/blog/public/image-crop
If you want to remove public or public/index.php from URL In laravel, Click Me
Conclusion
Crop and save image using jquery in laravel, you have learned how to crop image before upload using jQuery with ajax in laravel.
