Entering Javascript onchange file does not start when they select a file with the same name

Question

I have a file on my web page that allows the user to upload images.

I have settings, so when they select an image, a file input change event is fired and their preview of their image is displayed.

Sometimes, when they see a preview, they want to adjust the image a bit locally (for example, using paint to crop). Then click “Save” in the paint and click on the file and select the file again.

The problem is that when you reselect the file, the input change event does not fire even if the image data has been changed and if they try to upload the file to my server, the old image data is used.

Is there a way to detect when the user actually selects a file, and not when a file input change event occurs so that I can understand well in this case?

EDIT: note that I can just delete and recreate the file input every time the user selects an image, and this works, but that means the input to the file says “no file selected”, which confuses the user.

Answer 1

A simple solution is to do the following:

this.input.addEventListener('click', function() { this.value = ''; }, false); 

This causes the change event to be fired at any time when the user selects a file, because the initial click that opens the file browsing popup clears the input.

Answer 2

 this.input.bind('click', function() { this.value = ''; }, false); 

instead of deprecated .addEventListener() try .bind()