// Start upload preview image $(".gambar").attr("src", "assets/img/addimg.png"); var $uploadCrop, tempFilename, rawImg, imageId; function readFile(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('.upload-demo').addClass('ready'); $('#cropImagePop').modal('show'); rawImg = e.target.result; } reader.readAsDataURL(input.files[0]); } else { swal("Sorry - you're browser doesn't support the FileReader API"); } } $uploadCrop = $('#upload-demo').croppie({ viewport: { width: 150, height: 150, }, enforceBoundary: false, enableExif: true }); $('#cropImagePop').on('shown.bs.modal', function() { // alert('Shown pop'); $uploadCrop.croppie('bind', { url: rawImg }).then(function() { console.log('jQuery bind complete'); }); }); $('.item-img').on('change', function() { imageId = $(this).data('id'); tempFilename = $(this).val(); $('#cancelCropBtn').data('id', imageId); readFile(this); }); $('#cropImageBtn').on('click', function(ev) { $uploadCrop.croppie('result', { type: 'base64', format: 'jpeg', size: { width: 150, height: 150 } }).then(function(resp) { $('#item-img-output').attr('src', resp); $('#cropImagePop').modal('hide'); }); });