Here I am using the croppie.js
to upload an image
for user. All are working perfectly but the problem is, the modal is only open when it is in debug
window. When it is closed, the modal
doesn't open.
Here is the HTML
.
<div class="row">
<div class="col-md-12">
<div id="user_data">
</div>
</div>
</div>
<!-- crop image model -->
<div id="uploadimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload & Crop 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 & Upload 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>
Below is the Ajax
query
load_data();
function load_data() {
$.ajax({
url: "adminquery/fetch/fetch.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
success: function (data) {
$('#user_data').html(data);
}
});
}
// crop image
$(document).ready(function () {
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width: 150,
height: 150,
type: 'square' //circle
},
boundary: {
width: 300,
height: 300
}
});
$('#upload_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]);
$('#uploadimageModal').modal('show');
});
$('.crop_image').click(function (event) {
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (response) {
$.ajax({
url: "profile/profilepic.php",
type: "POST",
data: { "image": response },
success: function (data) {
$('#uploadimageModal').modal('hide');
$('#uploaded_image').html(data);
load_data();
}
});
})
});
});
I am very grateful if someone help me. Thanks in advance.