Javascript/jQuery image-cropper is not working

Question

I have been following a tutorial that uses the croppie.js image cropper. All my code is exactly the same as was specified in the tutorial, however even with adjustments I cannot get it to work.

When the user clicks the 'Choose file' input and selects an image, the cropper should automatically load inside a modal dialogue box, however once the image has been selected, nothing happens.

I have tried to get the code to work in both Safari and Chrome with no success. Appreciate any advice.

(Also using Bootstrap v4.4.1)

Image cropper src: https://github.com/Foliotek/Croppie

Code:

<div class="contentWrap">

<div class="infoBox"> 

    <div id="contentBox" class="aboutBox bubble">

    <div class="container">
      <br />
  <h3 align="center">Test Cropper</h3>
  <br />
  <br />
 <div class="panel panel-default">
  <div class="panel-heading">Select Profile Image</div>
  <div class="panel-body" align="center">
   <input type="file" name="insert_image" id="insert_image" accept="image/*" />
   <br />
   <div id="store_image"></div>
  </div>
 </div>
</div>
</html>

<div id="insertimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Crop & Insert Image</h4>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-md-8 text-center">
        <div id="image_demo" style="width:350px; margin-top:30px"></div>
      </div>
      <div class="col-md-4" style="padding-top:30px;">
    <br />
    <br />
    <br/>
        <button class="btn btn-success crop_image">Crop & Insert Image</button>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
 </div>
 </div>
</div>

<script>  
$(document).ready(function(){

$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
  width:200,
  height:200,
  type:'square' //circle
},
boundary:{
  width:300,
  height:300
}    
});

$('#insert_image').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
  $image_crop.croppie('bind', {
    url: event.target.result
  }).then(function(){
    console.log('jQuery bind complete');
  });
}
reader.readAsDataURL(this.files[0]);
$('#insertimageModal').modal('show');
});

$('.crop_image').click(function(event){
$image_crop.croppie('result', {
  type: 'canvas',
  size: 'viewport'
}).then(function(response){
  $.ajax({
    url:'insert.php',
    type:'POST',
    data:{"image":response},
    success:function(data){
      $('#insertimageModal').modal('hide');
      load_images();
      alert(data);
    }
  })
 });
});

load_images();

function load_images()
{
$.ajax({
  url:"fetch_images.php",
  success:function(data)
  {
    $('#store_image').html(data);
  }
})
}

});  
</script>


    </div> 

</div>

</div>

Header:

<!--Croppie image cropper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css" />

<!--jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Answer 1

Since you are using modal function of Bootstrap library, all you need is to add Bootstrap JavaScript file in header.

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

$(document).ready(function() {

  $image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width: 200,
      height: 200,
      type: 'square' //circle
    },
    boundary: {
      width: 300,
      height: 300
    }
  });

  $('#insert_image').on('change', function() {
    var reader = new FileReader();
    reader.onload = function(event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function() {
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#insertimageModal').modal('show');
  });

  $('.crop_image').click(function(event) {
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response) {
      $.ajax({
        url: 'insert.php',
        type: 'POST',
        data: {
          "image": response
        },
        success: function(data) {
          $('#insertimageModal').modal('hide');
          load_images();
          alert(data);
        }
      })
    });
  });

  load_images();

  function load_images() {
    $.ajax({
      url: "fetch_images.php",
      success: function(data) {
        $('#store_image').html(data);
      }
    })
  }

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script>

<div class="contentWrap">

  <div class="infoBox">

    <div id="contentBox" class="aboutBox bubble">

      <div class="container">
        <br />
        <h3 align="center">Test Cropper</h3>
        <br />
        <br />
        <div class="panel panel-default">
          <div class="panel-heading">Select Profile Image</div>
          <div class="panel-body" align="center">
            <input type="file" name="insert_image" id="insert_image" accept="image/*" />
            <br />
            <div id="store_image"></div>
          </div>
        </div>
      </div>

      <div id="insertimageModal" class="modal" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Crop & Insert Image</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-8 text-center">
                  <div id="image_demo" style="width:350px; margin-top:30px"></div>
                </div>
                <div class="col-md-4" style="padding-top:30px;">
                  <br />
                  <br />
                  <br/>
                  <button class="btn btn-success crop_image">Crop & Insert Image</button>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>



    </div>

  </div>

</div>