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

Popular

How to generate keystore jks file - Android keystore by keytool Java

How to implement pagination in Flutter by getting from API

How to protect a in used function from calling by another sessions

Laravel migration example - Create Table, check if has table or column and add forignkey

Categories

Most Recent

Post Archive

Total views

Comments

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