basically what I'm doing is an admin panel and in this section, the user can upload images and also updated the images. when the user clicks on an image a model will load up with the selected image and below there will be a choose new image button when the user clicks on that they can update the image
I am getting below error at the time of cropping the image
TypeError: null is not an object (evaluating 'singleInst.result')
I'm using croppie to crop images.
<div class="row">
<?php $count = 0;?>
<?foreach ($get_specials as $display_specials): ?>
<div class="col-md-4" data-toggle="modal" data-target="#exampleModal<?php echo $display_specials['id']?>">
<div class="main-card mb-3 card" >
<div class="card-header"><?=$display_specials['name'];?></div>
<input type="hidden" value="<?=$display_specials['name'];?>" name="hidden_name<?=$count?>" id="hidden_name<?=$count?>"/>
<div class="card-body">
<img src ="<?php echo site_url(); ?>assets/images/specials/<? echo $display_specials['image'];?>" style = "width:100%" >
</div>
<div class="card-footer">Click on the image to browse</div>
</div>
</div>
<!--Edit Special Modal Start-->
<div class="modal fade" id="exampleModal<?=$display_specials['id'];?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit <?=$display_specials['name'];?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php echo validation_errors(); ?>
<div class="form-row">
<div class = "container">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6">
<img src ="<?php echo site_url(); ?>assets/images/specials/<? echo $display_specials['image'];?>" style = "width:100%" >
</div>
<div class = "col-md-3"></div>
</div>
<hr>
</div>
<div class="col-md-12" style="">
<div id="upload-demo-i<?=$count?>"></div>
</div>
<input type="hidden" value="<?=$display_specials['id'];?>" name="edit_id<?=$count?>" id="edit_id<?=$count?>"/>
<div class="col-md-6 mb-6">
<label for="validationTooltip02">Product Name</label>
<input type="text" class="form-control" placeholder="Enter Product Name" id = "edit_name<?=$count?>" name="edit_name<?=$count?>" value = "<?=$display_specials['name'];?>" required>
<input type="hidden" class="form-control" placeholder="Enter Product Name" id = "edit_oldname<?=$count?>" name="edit_oldname<?=$count?>" value = "<?=$display_specials['name'];?>">
</div>
<div class="col-md-6 mb-6">
<label for="validationTooltip02">Cost Rs</label>
<input type="text" class="form-control" placeholder="Cost Rs" id = "edit_price<?=$count?>" name="edit_price<?=$count?>" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value = "<?=$display_specials['cost'];?>" required>
</div>
<div class="col-md-12 mb-12 textarea__field">
<label for="validationTooltip02">Product Discription</label>
<textarea class="form-control" placeholder="Add Body" id = "edit_discription<?=$count?>" name = "edit_discription<?=$count?>"><?=$display_specials['discription'];?></textarea>
</div>
<div class="position-relative row form-group">
<div class="col-sm-12">
<label for="validationTooltip02">Add a new image</label>
<input name="editimage<?=$count?>" id = "editimage<?=$count?>" type="file" class="form-control-file">
<input type="hidden" id="checkimage<?=$count?>" name="checkimage<?=$count?>" value="<? echo $display_specials['image'];?>">
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div id="upload-demo2<?=$count?>" name="upload-demo2<?=$count?>" style="width:350px"></div>
</div>
<button class="btn btn-info edit-result<?=$count?>" type="submit">Edit</button>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<?php $count++; ?>
<!--Edit Special Modal End-->
<?endforeach?>
<input type="hidden" value="<?=$count;?>" name="count" id ="count"/>
</div>
<script>
var count = $("input[name='count']").val();
//var y = 1;
for(var z = 0; z < count; z++){
$uploadCrop2 = $("#upload-demo2"+z).croppie({
enableExif: true,
viewport: {
width: 350,
height: 200,
type: 'rectangle'
},
boundary: {
width: 360,
height: 210
}
});
$("#editimage"+z).on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop2.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete'+z);
});
}
reader.readAsDataURL(this.files[0]);
});
console.log("count of z is = "+z)
}
$(".edit-result"+z).on('click', function (ev) {
$uploadCrop2.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
for(var y = 0; y < count; y++){
//console.log('hellow');
var error = 0;
var edit_id = $("input[name='edit_id"+ y +"']").val();
var edit_name = $("input[name='edit_name"+ y +"']").val();
var edit_price = $("input[name='edit_price"+ y +"']").val();
var edit_discription = $("textarea[name='edit_discription"+ y +"']").val();
var editimage = $("input[name='editimage"+ y +"']").val();
var checkimage = $("input[name='checkimage"+ y +"']").val();
var edit_oldname = $("input[name='edit_oldname"+ y +"']").val();
console.log(edit_name);
console.log("hellow"+y);
if(edit_name === "" || edit_price === ""){
error++;
html = '<div class="col-md-12"><div class="alert alert-danger fade show" role="alert">Make sure you have fill the data</div></div>';
$("#upload-demo-i"+ y +"").html(html);
}else{
for(var x = 0; x <= count; x++){
var hidden_name = $("input[name='hidden_name"+ x +"']").val();
//console.log(hidden_name);
if(edit_name === edit_oldname){
}else if(edit_name === hidden_name){
error++;
html = '<div class="col-md-12"><div class="alert alert-danger fade show" role="alert">Name is already taken</div></div>';
$("#upload-demo-i"+ y +"").html(html);
}
}
}
//console.log(error);
if(error===0){
$.ajax({
url: "update/specials_update",
type: "POST",
data: {"image":resp, edit_id:edit_id, edit_name:edit_name, edit_price:edit_price, edit_discription:edit_discription, "editimage":editimage, "checkimage":checkimage},
error: function(data) {
html = '<div class="col-md-12"><div class="alert alert-danger fade show" role="alert">There was an error</div></div>';
$("#upload-demo-i"+ y +"").html(html);
},
success: function (data) {
//html = '<img src="' + resp + '" />';
html = '<div class="col-md-12"><div class="alert alert-success fade show" role="alert">The product was succesfully added</div></div>';
$("#upload-demo-i"+ y +"").html(html);
//setTimeout("window.location.href='specials';",1000)
}
});
}
//console.log(y);
}
});
});
<script/>