How to Implement Cropper.js in Laravel for Image Cropping Before Upload

Please make sure you already install Jquery. Otherwise you will get error.

Video

Lib

https://www.npmjs.com/package/cropperjs/v/1.6.2

web.php

<?php

use Illuminate\Support\Facades\Route;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;

/*
|--------------------------------------------------------------------------
| 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 () {
    $allFiles = [];
    try {
        $allFiles = File::allFiles('storage/users');
    } catch (\Throwable $th) {
        //Skip error bcos when no file it will catch error
    }
    return view('welcome',compact('allFiles'));
});
Route::post('/upload-cropped',function(Request $request){
    $request->validate([
        'croppedImg' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
    ]);
  
    if($request->hasFile('croppedImg')){
       
        // Store the uploaded file
        $avatarName ='_avatar'.time().'.'.request()->croppedImg->getClientOriginalExtension();
        $request->croppedImg->storeAs('public/users', $avatarName);
        $avatarPath = $avatarName;
       
    }
    return redirect()->back()->with('message', 'Uploaded successfully.');
});

app.js

import './bootstrap';
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

let cropper;
document.addEventListener('DOMContentLoaded', () => {

const imageInput = document.getElementById('selectedImg');

imageInput.addEventListener('change', () => {
        $("#submit").attr('disabled',true);
        // Destroy previous CropperJS instance if it exists
        if (typeof cropper != 'undefined') {
            console.log("Destroy previous");
            cropper.destroy();
            cropper = null;
        }
        const file = imageInput.files[0];
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = (e) => {
                // console.log(e,e.target);
                const imgResult = e.target.result;

const image = document.getElementById('image');
                image.src = imgResult;
                cropper = new Cropper(image, {
                    aspectRatio: 1,
                    crop(event) {
                        $("#submit").attr('disabled',true);
                    },
                    preview:'.preview'
                });
                $("#crop").attr('hidden',false);
            };
            reader.readAsDataURL(file);
        }
    });
});

$("#crop").click(function () {
    let canvas = cropper.getCroppedCanvas();

canvas.toBlob(function (blob) {
       
        const file = new File([blob], 'croppedImage.png', { type: blob.type });
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        const croppedImageInput = $("input[name='croppedImg']");
        croppedImageInput[0].files = dataTransfer.files;
        $("#submit").attr('disabled',false);
    });

});

welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Demo by Makarablue</title>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
  <style>
    .preview{
      width: 150px;
      height: 150px;
      overflow: hidden;
      border-radius: 50%;
    }
  </style>
</head>
<body style="background-color: rgb(235, 235, 235);">
  <div class="container border border-4 mt-5">
    @if(session()->has('message'))
     <div class="alert alert-success" role="alert">{{session()->get('message')}}</div>    
    @endif
    <div class="d-flex p-2">
      <div>
        <div class="preview" >
          
        </div>
        
      </div>
      <div class="p-2">
        <form action="/upload-cropped" method="POST" enctype="multipart/form-data">
          {{ csrf_field() }}
            <Label>Select Image here</Label>
            <input type="file" id="selectedImg" class="form-control" accept="image/png, image/gif, image/jpeg">
            <input type="file" id="croppedImg" name="croppedImg" class="form-control" hidden>
            <button type="submit" id="submit" class="mt-2 mb-2 btn btn-primary" disabled>Save</button>
        </form>
        <img src="" alt="" id="image">
        <button id="crop" class="mt-2 mb-2 btn btn-primary" hidden>Crop</button>
      </div>
    </div>
    <div class="container">
      <div class="row g-1">
          @foreach ($allFiles as $item)
              <div class="col-2 mb-1">
                  <span style="margin:1px;">
                      <img src="{{$item->getPathName()}}"   alt="" style="width: 100%;">
                  </span>
              </div>
          @endforeach
      </div>
  </div>
  </div>
</body>
</html>

How to Implement Cropper.js in Laravel for Image Cropping Before Upload

Video

Lib

web.php

app.js

welcome.blade.php

Makarablue

Post a Comment

Random Posts

Tools

🛠 Free Online Tools

Popular

The Best Free Image Generator with API Access: Discover Google Lab Flow AI

Chrome Extensions: The Best Bridge Between Browser Tasks and APIs

Implement Websocket on flutter App - Binance API with source code

Fix Web POS Receipt Auto-Cut on Long Orders (Silent Printing with Electron Print Server)

Categories

Most Recent

Total views

Do With Love

Footer Copyright

Contact form

How to Implement Cropper.js in Laravel for Image Cropping Before Upload

Video

Lib

web.php

app.js

welcome.blade.php

Makarablue

You may like these posts

Post a Comment

Random Posts

Footer Copyright

Contact form