I can't use JQuery Plugin Croppie. Getting "croppie is not a function" error

Question

I'm trying to crop the image before uploading and I'm using Croppie.js plugin but I don't know I'm getting "Uncaught TypeError: $(...).croppie is not a function" this error in console.

I tried to use this plugin at the end of the file just before the body and also tried in the head and between the html but I'm getting the same error. I don't know why this is happening.

Here's my code.

<script src="jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/croppie/croppie.css" />
<script type="text/javascript">
$(document).ready(function(){    
$image_crop = $('#upload-image').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'square'
    },
    boundary: {
        width: 300,
        height: 300
    }
});
$('#userPhoto').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $image_crop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });         
    }
    reader.readAsDataURL(this.files[0]);
});
$('#crop').on('click', function (ev) {
    $image_crop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (response) {
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: {"image":response},
            success: function (data) {
                html = '<img src="' + response + '" />';
                $("#upload-image-i").html(html);
            }
        });
    });
}); 
});
</script>

I've tried all the code in a single file and it's working fine there.

Answer 1

I faced the same problem. Check the CDN.

You have to use two links (croppie.css and croppie.min.js) to the page where you are trying to upload the image.

CDN

https://cdnjs.com/libraries/croppie