Image Crop Upload Script in Laravel (Dynamic Dimension Cropper)

                                        <link rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>

                                    

                                        <form method="POST" action="/upload-image">
    @csrf
    <label>Width</label>
    <input type="number" id="width" placeholder="Enter width">

    <label>Height</label>
    <input type="number" id="height" placeholder="Enter height">
    <br><br>

    <input type="file" id="imageInput" accept="image/*">
    
    <div class="image-container">
        <img id="image" style="max-width:100%;">
    </div>

    <input type="hidden" name="cropped_image" id="cropped_image">
    <br>

    <button type="button" id="cropBtn">Crop Image</button>
    <button type="submit">Submit</button>
</form>

<h3>Preview</h3>
<img id="preview" style="max-width:300px;">
                                    

                                        <script>
let cropper;

document.getElementById("imageInput").addEventListener("change", function(e) {
    let width = document.getElementById("width").value;
    let height = document.getElementById("height").value;

    if (width === "" || height === "") {
        alert("Please enter width and height first");
        return;
    }

    let aspectRatio = width / height;
    let file = e.target.files[0];
    let reader = new FileReader();

    reader.onload = function(event) {
        let image = document.getElementById("image");
        image.src = event.target.result;

        if (cropper) {
            cropper.destroy();
        }

        cropper = new Cropper(image, {
            aspectRatio: aspectRatio,
            viewMode: 1,
            autoCropArea: 1,
            movable: true,
            zoomable: true,
            scalable: true,
        });
    };

    reader.readAsDataURL(file);
});

document.getElementById("cropBtn").addEventListener("click", function() {
    let width = document.getElementById("width").value;
    let height = document.getElementById("height").value;

    if (!cropper) {
        alert("Select image first");
        return;
    }

    let canvas = cropper.getCroppedCanvas({
        width: width,
        height: height
    });

    let base64 = canvas.toDataURL("image/png");
    document.getElementById("preview").src = base64;
    document.getElementById("cropped_image").value = base64;
});
</script>
                                    

                                        public function upload(Request $request)
{
    $request->validate([
        'cropped_image' => 'required|string',
    ]);

    $croppedImage = $request->input('cropped_image');
    $imageData = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $croppedImage));
    $filename = 'image_'.time().'.png';

    Storage::disk('public')->put($filename, $imageData);

    return back()->with('success', 'Image uploaded successfully!');
}