Here I am trying to achieve to upload multiple images with preview and I achieved that, but now problem is how do I delete images from preview after clicking x button and also remove that image from it's array let item_images = [];? I would appreciate any help.
function previewImage(e, selectedFiles, imagesArray) {
const elemContainer = document.createElement('div');
elemContainer.setAttribute('class', 'item-images');
for (let i = 0; i < selectedFiles.length; i++) {
imagesArray.push(selectedFiles[i]);
const elem = document.createElement('img');
elem.setAttribute('src', URL.createObjectURL(e.target.files[i]));
elem.setAttribute('class', 'item-photo__preview')
const removeButton = document.createElement('button');
removeButton.setAttribute('type', 'button');
removeButton.innerHTML = '<span>×</span>'
elemContainer.appendChild(elem);
elemContainer.appendChild(removeButton);
}
return elemContainer;
}
let item_images = [];
document.querySelector('#photo-upload').addEventListener('change', (e) => {
let selectedFiles = e.target.files;
const photoPreviewContainer = document.querySelector('#photo-upload__preview');
const elemContainer = previewImage(e, selectedFiles, item_images);
photoPreviewContainer.appendChild(elemContainer);
});.item-photo__preview {
width:150px;
height: 150px;
}<div class="item-upload">
<input id="photo-upload" type="file" multiple/>
<div id="photo-upload__preview" class="upload-preview"></div>
</div>Delegate:
function previewImage(e, selectedFiles, imagesArray) {
const elemContainer = document.createElement('div');
elemContainer.setAttribute('class', 'item-images');
for (let i = 0; i < selectedFiles.length; i++) {
imagesArray.push(selectedFiles[i]);
const imageContainer = document.createElement('div');
const elem = document.createElement('img');
elem.setAttribute('src', URL.createObjectURL(selectedFiles[i]));
elem.setAttribute('class', 'item-photo__preview')
const removeButton = document.createElement('button');
removeButton.setAttribute('type', 'button');
removeButton.classList.add('delete');
removeButton.dataset.filename = selectedFiles[i].name,
removeButton.innerHTML = '<span>×</span>'
imageContainer.appendChild(elem);
imageContainer.appendChild(removeButton);
elemContainer.appendChild(imageContainer);
}
return elemContainer;
}
let item_images = [];
document.getElementById('photo-upload').addEventListener('change', (e) => {
let selectedFiles = e.target.files;
const photoPreviewContainer = document.querySelector('#photo-upload__preview');
const elemContainer = previewImage(e, selectedFiles, item_images);
photoPreviewContainer.appendChild(elemContainer);
});
document.getElementById('photo-upload__preview').addEventListener('click', (e) => {
const tgt = e.target.closest('button');
if (tgt.classList.contains('delete')) {
tgt.closest('div').remove();
const fileName = tgt.dataset.filename
item_images = item_images.filter(img => img.name != fileName)
}
}).item-photo__preview {
width: 150px;
height: 150px;
}<div class="item-upload">
<input id="photo-upload" type="file" multiple/>
<div id="photo-upload__preview" class="upload-preview"></div>
</div>