The scenario is I'm uploading and cropping up to 4 images to a page. Once an image is cropped, it will appear on the page. However, when i go to upload and crop a second image, this second image appears on screen twice; essentially overwriting the first image I uploaded as well.
I've managed to work out that in the below section of Javascript, if I put an alert('is repeating'); in there it will trigger for the number of times I have uploaded and cropped an image. So if i'm on my second turn uploading an image, the alert will trigger twice during the cropping stage. If i'm on my 3rd time uploading and cropping an image, the alert will trigger 3 times etc.
The desired outcome is that when i upload and crop the first image it will appear under the image element with ID
id="profile-pic-1"
Then when i upload and crop a second image, it will appear under the image element with ID
id="profile-pic-2"
and so on and so forth.
If anyone out there can provide a solution that would be amazing. I've been raking my brains and searching google frantically for a solution for the past couple of days with no luck!!
$('#crop-img-btn').click(function() {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(resp) {
$('#Pic' + imageSelector + 'Url').val(resp);
$('#profile-pic-' + imageSelector).attr("src", resp);
$('#crop-modal').modal('hide');
$uploadCrop.croppie('destroy');
});
})
[The HTML and Javascript is below]
var Demo = (function() {
function demoUpload(imageSelector) {
var $uploadCrop;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#crop-modal').modal('show');
$('#image-editor').addClass('ready');
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function() {
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(input.files[0]);
} else {
//swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#image-editor').croppie({
enableExif: true,
showZoomer: false,
viewport: {
width: 262,
height: 211,
type: 'square'
},
boundary: {
width: 272,
height: 221
}
});
$('#upload-pic' + imageSelector).on('change', function() {
readFile(this);
});
// $('#upload-pic2').on('change', function () { readFile(this); });
$('#crop-img-btn').click(function() {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(resp) {
$('#Pic' + imageSelector + 'Url').val(resp);
$('#profile-pic-' + imageSelector).attr("src", resp);
$('#crop-modal').modal('hide');
$uploadCrop.croppie('destroy');
});
})
}
function init(imageSelector) {
// Things to do on initial page load
//$(".profile-pic").attr("src", "/assets/images/blank.png");
// This ensures uploaded image re-renders on page re-load
//$('#Pic' + imageSelector + 'Url').attr("value", $('#profile-pic-' + imageSelector).attr("src"));
demoUpload(imageSelector);
}
return {
init: init
};
})();<div class="row">
<div class="col-6 col-lg-3 pic-padding" id="pdiv1">
<div id="display-pic">
<div class="profile-pic-container">
<img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-1" id="profile-pic-1" />
<label for="upload-pic1" class="pic-control-bg cabinet">
<div id="img-action-icon">
<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
</div>
</label>
</div>
<input class="hidden" type="file" id="upload-pic1" name="pic1" class="upload-btn" accept="image/*">
<input type="text" id="Pic1Url" name="Pic1Url" class="hidden">
</div>
</div>
<div id="pdiv2" class="col-6 col-lg-3 pic-padding">
<div id="display-pic">
<div class="profile-pic-container">
<img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-2" id="profile-pic-2" />
<label for="upload-pic2" class="pic-control-bg cabinet">
<div id="img-action-icon">
<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
</div>
</label>
</div>
<input class="hidden" type="file" id="upload-pic2" name="pic2" class="upload-btn" accept="image/*">
<input type="text" id="Pic2Url" name="Pic2Url" class="hidden">
</div>
</div>
<div id="pdiv3" class="col-6 col-lg-3 pic-padding">
<div id="display-pic">
<div class="profile-pic-container">
<img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-3" id="profile-pic-3" />
<label for="upload-pic3" class="pic-control-bg cabinet">
<div id="img-action-icon">
<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
</div>
</label>
</div>
<input class="hidden" type="file" id="upload-pic3" name="pic3" class="upload-btn" accept="image/*">
<input type="text" id="Pic3Url" name="Pic3Url" class="hidden">
</div>
</div>
<div id="pdiv4" class="col-6 col-lg-3 pic-padding">
<div id="display-pic">
<div class="profile-pic-container">
<img src="@profilePics" class="profile-pic img-responsive" name="profile-pic-4" id="profile-pic-4" />
<label for="upload-pic4" class="pic-control-bg cabinet">
<div id="img-action-icon">
<img src="@routes.Assets.versioned("images/plus.png")" class="pic-control">
</div>
</label>
</div>
<input class="hidden" type="file" id="upload-pic4" name="pic4" class="upload-btn" accept="image/*">
<input type="text" id="Pic4Url" name="Pic4Url" class="hidden">
</div>
</div>
</div>
<!-- IMAGE EDITOR START -->
<!-- Modal -->
<div class="modal" id="crop-modal" 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="image-editor">
</div>
<div class="modal-footer">
<button type="button" id="crop-img" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="crop-img-btn" class="btn btn-primary">Crop</button>
</div>
</div>
</div>
</div>
<!-- END Modal -->
<script>
var $imageSelector;
// Done to work out which image is being uploaded so croppie can output the image to the correct div
$('input[type="file"]').click(function() {
switch ($(this).attr('id')) {
case 'upload-pic1':
$imageSelector = 1;
Demo.init($imageSelector);
break;
case 'upload-pic2':
$imageSelector = 2;
Demo.init($imageSelector);
break;
case 'upload-pic3':
$imageSelector = 3;
Demo.init($imageSelector);
break;
case 'upload-pic4':
$imageSelector = 4;
Demo.init($imageSelector);
break;
default:
$imageSelector = 0;
Demo.init($imageSelector);
}
});
</script>