I am creating a product registration using php and using vanilla js to get the selected images from the file input and preview them in the screen. Now I want to provide a way for the user to remove unwanted images before submitting the form.

The form has the images and other inputs for the title of the product, description, price and category selection.

I have seen so far in many places people telling that you can use a dataTransfer object to store the images and remove from the dataTransfer and after making the file input (=) the dataTransfer but none of the answers I've found so far have worked.

Is there a way to remove images from the file input once they are selected?

CodePudding user response：

@CBroe I'm talking about Data Transfer in js (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer). Thank you for your comment. If it's not possible to remove files from the filelist of the file input I will have to store those data somewhere and create an arbitrary submission of the form.

Thank you

CodePudding user response：

@RiggsFolly the user clicks on the file input <input type="file" multiple> and selects (let's say) 4 images. These images are read by the js script and displayed on the screen, as a preview. I want to provide a small garbage icon on top of each image and let the user be able to remove specific images.

I wanted to know if it's possible to remove the selected images from the files inserted on the file input. Then I would remove the image using the name of the file as reference (or any other reference). I just never found a way to remove files from the input file.