CODEWITHSUNDEEP
javascriptjquerycodeignitercroppie
Abdul Rehman
Abdul Rehman

Reputation: 25

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

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.

enter image description here

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.

Upvotes: 1

Views: 1955

Answers (1)

Mostak Ahamed Nishat
Mostak Ahamed Nishat

Reputation: 79

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

Upvotes: 1

Related Questions