При клике на "добавить фотографию" добавляем фотографию. При клике на фотографию она удаляется. Но возможность загрузить снова фотографию пропадает. Подскажите пожалуйста что я делаю не так? Спасибо, в js я новичек
function handleFileSelect(evt) {
var file = evt.target.files; // FileList object
var f = file[0];
// Only process image files.
if (!f.type.match('image.*')) {
alert("Image only please....");
}
var reader = new FileReader();
const output = document.getElementById('output');
const inputRemove = document.querySelector('.photo-checkout__input-file-remove');
var span = document.createElement('span');
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
span.innerHTML = ['<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'].join('');
output.insertBefore(span, null);
};
})(f);
inputRemove.addEventListener("click", function (e) {
span.remove();
});
reader.readAsDataURL(f);
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
.photo-checkout__block {
position: relative;
width: 164px;
height: 120px;
cursor: pointer;
border-radius: 5px;
}
.photo-checkout__input-file {
cursor: pointer;
border-radius: 5px;
}
.photo-checkout__input-file span {
display: flex;
width: 100%;
height: 100%;
border-radius: 5px;
}
.photo-checkout__input-file span img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
}
.photo-checkout__input-file span:hover .photo-checkout__input-file-remove {
opacity: 1;
pointer-events: auto;
}
.photo-checkout__input-file input {
cursor: pointer;
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
border-radius: 5px;
}
.photo-checkout__input-file label {
display: inline-flex;
align-items: center;
cursor: pointer;
width: 165px;
height: 120px;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 500;
font-size: 14px;
background: #ffffff;
transition: all 0.3s ease 0s;
color: #000000;
}
.photo-checkout__input-file label::before {
content: "+";
font-size: 18px;
width: 15px;
height: 15px;
margin: 0px 0px 10px 0px;
color: #000000;
}
.photo-checkout__input-file-remove {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
border-radius: 5px;
background: linear-gradient(
0deg,
rgba(54, 108, 217, 0.8),
rgba(54, 108, 217, 0.8)
);
font-weight: 500;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #ffffff;
z-index: 10;
opacity: 0;
transition: opacity 0.3s ease 0s;
pointer-events: none;
}
<div class="photo-checkout__block">
<div class="photo-checkout__input-file">
<input type="file" id="file" name="file" class="file">
<label>Фотография<br> товара</label>
<span id="output">
<div class="photo-checkout__input-file-remove">Удалить</div>
</span>
</div </div>