FireFox and Chrome treat uploading the same file differently on jQuery .change() event

I was recently debugging an unusual issue where a user would upload a file, delete that file and then upload that same file again. The way I wrote the code was that I used some simple jQuery AJAX to post the file and notify the user their file had been uploaded and I then gave them the option to delete the file they uploaded. In FireFox the user was able to upload a file, delete it and then upload the same file. In Chrome the user uploaded a file, deleted it and then tried to upload the same file again, but nothing happened.

After debugging and looking into it, I had to clear the value of the file input after the user deleted the file. Since all of this happened without the page reloading and it was driven via JavaScript the file input value retained the file's name. Chrome decided not to upload the same file since it the name matched the value. This made sense since I was using the .change event on the click that triggers the file browser.

To summarize, when you are using the jQuery .change() event handler to check if a user is uploading a file, FireFox will always treat a user selecting the same file as a change whereas Chrome would treat it as not a change so to remedy that you reset the value of the input to be empty after the user deletes the file. This is if you are doing all of this via JavaScript (uploading and deleting) without a page refresh.

Show Comments