Remove an image loaded in an input file

[jeremybalcon]

I created in Webflow an div area than contains a “input file” that accepts images only. When I click on it, my brower opens up and I select an image. This image is then automatically previewed in my div area. When the image is loaded, if I click on it, the brower pops up again, and I can pick another photo. So far, so good.

The situation begins to get complicated when I click on an X cross shaped icon that enables me to remove the image : impossible to make it work Wized : the image always remains here. I’ve been trying with the ChatGPT assistance for hours, but I still can’t make it.

If anyone has a clue how to implement this feature (remove the image), I would be grateful.

Thanks in advance for your help.

Jeremy

[elvisben]

Hi @jeremybalcon ,

Welcome to the Wized forum!

This seems like its either setting the background of the div or the div has an image tag.

If it is the background being set then onclick of the “X” button you’d need to just set the styling as background: none; for the div - to do this in JS it would be:

targetDiv.style.background = 'none';

if its an image tag used then you’ll need to update the src tag to a blank string - to do so in JS:

targetImg.setAttribute('src', '');

Let me know if it uses something different other than the ones I described above.