Upload multiple images with preview and delete them after click

Question

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>&times;</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>

maybe it can help you: [https://stackoverflow.com/questions/3144419/how-do-i-remove-a-file-from-the-filelist](https://stackoverflow.com/questions/3144419/how-do-i-remove-a-file-from-the-filelist) — adelbbj, Sep 13 '21 at 07:30

mplungjan · Accepted Answer · 2021-09-13T08:16:35.940

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>&times;</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>

Okay, but how now should I approach image delete from array? Because when I add image for preview I also push that image to array ```imagesArray.push(selectedFiles[i]);```. And I would like when I click `x` also remove that image from array. — zyyyzzz, Sep 13 '21 at 07:41
I wrapped the images in a div each. I cannot update the file input text of "n files" — mplungjan, Sep 13 '21 at 08:17

Upload multiple images with preview and delete them after click

1 Answers1