How to add a remove link for an image preview?

JavaScript
1

Hi,

Help needed please. I need a multiples images uploader with preview and a delete button for the previewed images. Most of the solutions on the Internet use jQuery, which I cannot use. So, how can I add a remove option(link) to the preview images? This is what I got so far https://jsfiddle.net/oldcastle/eghmav75/1/

2

Hi there :wave:

For each new photo you could append a div with img and button.

So your reader.onload could look like this:

reader.onload = e => {
  const div = document.createElement('div')
  const img = document.createElement('img')
  const button = document.createElement('button')
              
  img.src = e.target.result
  img.width = 200
  img.height = 200
  img.alt = `file-${++count}`

  button.textContent = "Delete"
  button.addEventListener('click', () => {
    preview.removeChild(div)
  })
       
  div.appendChild(img)
  div.appendChild(button)
       
  preview.appendChild(div)
}
3

Thanks, but the code doesn’t fully work. It removes the image from the dom, but it still submits the images that I deleted. How to fix that?

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.