I am trying to make some upload image function with preview, I push the image URL to the array and put the if condition to avoid uploading more than 1 image, and empty the array when I delete the image preview.
But I have some issue, when I pick some images let say image A and deleted it the preview box, it should be able to choose image A in the next step, but it can't, unless I choose another image with the different name, here is my code below :
var arrCover = [];
var arrIm = [];
function uploadBanner(arr, prefix) {
var cover;
if(arr === 'coverBanner'){
cover = ($('.campaign-cover-image'))[0].files[0];
arr = arrCover;
}else {
cover = ($('.campaign-im-image'))[0].files[0];
arr = arrIm;
}
if (cover) {
var reader = new FileReader();
reader.onload = function (e) {
const image = e.target.result;
arr.push(image);
if(arr.length < 2){
var imgs = $(`
<div class="campaign-cover-image${prefix}">
<img class="image-cover${prefix}"
src=${arr.slice(-1)}>
</div>`);
var removeIcon = $(`<div class="delete-cover${prefix}">x</div>`);
$('.campaign-cover' + prefix).append(imgs);
$('.campaign-cover-image' + prefix).append(removeIcon);
} else {
alert('only 1 image');
}
};
reader.readAsDataURL(cover);
}
$(document.body).on('click','.delete-cover' + prefix, function(){
if(prefix === "-banner"){
var prevImg = $('.image-cover' + prefix).attr('src');
arrCover.filter(function(el){
var prevArr = el === prevImg;
if(prevArr){
arrCover = [];
$('.campaign-cover-image'+ prefix).val('');
}
});
$(this).closest('.campaign-cover-image' + prefix).remove();
}
});
}
$(document).ready(function(){
uploadBanner();
});#upload_button {
display: inline-block;
}
#upload_button input[type=file] {
display:none;
}
.btn {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="campaign-cover-banner"></div>
<div id="upload_button">
<label>
<input
type="file"
class="campaign-cover-image"
onchange="uploadBanner('coverBanner','-banner');"
/><br>
<span class="btn btn-primary">Add image1</span>
</label>
</div>
<div class="campaign-cover-im"></div>
<div id="upload_button">
<label>
<input
type="file"
class="campaign-im-image"
onchange="uploadBanner('imBanner','-im');"
/><br>
<span class="btn btn-primary">Add image2</span>
</label>
</div>
</body>
</html>
