Upload example not doing anything

I have tried for the last 2 hours messing with different file upload combinations and have even extrapolated the code from the demo website and am currently using that. When I click “Upload,” I get the dialog and can choose any kind of file (jpg, png, gif), and click “Open,” and nothing changes. I don’t even get an error. At one point, I was using some other code and I would get an error in the console regarding “substring of undefined” on line 134, but I no longer get that error using the code from the Croppie demo website. Here is what I am currently using:

HTML

<div class="row">
  <div class="large-6 columns">
    Profile picture upload
    <br>
    <a class="button">
      <span>Upload</span>
      <input type="file" id="profile-picture-upload" accept="image/*" required/>
    </a>
    <small class="error">Please choose or upload your profile picture</small>
  </div>
  <div class="large-6 columns">
    <h6 class="text-center">Profile Picture Preview</h6>

    <div class="text-center">
      <img id="profile-pic-preview" src="http://placehold.it/300.jpg?text=choose+or+upload+a+profile+picture">
    </div>
  </div>
</div>

JS

var $profilePicPreview = $('#profile-pic-preview').croppie({
    viewport: {
      width: 200,
      height: 200,
      type: 'circle'
    },
    boundary: {
      width: 300,
      height: 300
    },
    enableExif: true
  });

function readFile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (event) {
      $profilePicPreview.croppie('bind', {
        url: event.target.result
      });
    };

    reader.readAsDataURL(input.files[0]);
  } else {
    alert('Sorry - you\'re browser doesn\'t support the FileReader API');
  }
}

$('#profile-picture-upload').on('change', function() { readFile(this); });

This should be exactly what is on the demo page but it isn’t doing anything. Can anyone tell me where I’m making a mistake or what might be interfering with the functionality of this?

[rubyshine72]

$uploadCrop = $(‘#avatar_img’).croppie({ enableExif: true, viewport: { width: 200, height: 200, type: ‘square’ }, boundary: { width: 300, height: 300 } });

var reader = new FileReader(); reader.onload = function (e) { $uploadCrop.croppie(‘bind’, { url: e.target.result }).then(function(){ //console.log(‘jQuery bind complete’); }); } reader.readAsDataURL(this.files[0]);

$uploadCrop.croppie(‘result’, { type: ‘canvas’, size: ‘viewport’ }).then(function (resp) { });

[rubyshine72]

Especially the small image is no problem, but the large image larger than viewport size is problem.