I have a file input in my webpage that allows a user to upload images.

I have things set up so that when they select an image, the change event of the file input is triggered and is shows them a preview of their image.

Sometimes once they see the preview they want to tweak the image a bit locally (eg using paint to crop it). They then click save in paint and click the file input and select the file again.

The problem is that when they select the file again, the change event of the input isn't triggered even though the image data has changed and if they try to upload the file to my server the old image data is used.

Is there any way to detect when the user actually selects a file, rather than when the file input change event occurs so that I can nicely deal with the case?

EDIT: Note that I can just delete and recreate a file input each time a user selects an image and this works but it means that the file input says 'no file chosen' which confuses the user.

I have a file input in my webpage that allows a user to upload images.

I have things set up so that when they select an image, the change event of the file input is triggered and is shows them a preview of their image.

Sometimes once they see the preview they want to tweak the image a bit locally (eg using paint to crop it). They then click save in paint and click the file input and select the file again.

The problem is that when they select the file again, the change event of the input isn't triggered even though the image data has changed and if they try to upload the file to my server the old image data is used.

Is there any way to detect when the user actually selects a file, rather than when the file input change event occurs so that I can nicely deal with the case?

EDIT: Note that I can just delete and recreate a file input each time a user selects an image and this works but it means that the file input says 'no file chosen' which confuses the user.

• javascript
• html
• file-upload

• you don't have to delete and recreate the input, you just have to reset its value: $('input').val(''); – Cristi Pufu Commented Dec 20, 2012 at 15:12
• if you upload the image again, the data should not the same as the old one. – shuaqiu Commented Dec 20, 2012 at 15:24
• @Cristi Pufu, I think doing that on the onclick event might do exactly what I need, thanks. – asutherland Commented Dec 20, 2012 at 15:36

2 Answers 2

A simple solution is to do the following:

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

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

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

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