OK, so your end-user clicked on “browse” button and selected a file. Now he wants to remove it from that “File” field and wishes to start afresh, but he can not. And you want to fix this “bug”.

You have most likely already visited this awesome discussion on StackOverflow https://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery and tried the various solutions mentioned there.

And you have definitely become much more conversant in “File field security” , “IE 8 just supporting a ‘read-only’ file field” and what not. 🙂

But the fact remains, that you are still stuck as those suggested solutions work fine on Chrome but do not work on other browsers. Right? 🙂

Well, here is a simpler solution that works across the browsers.

Please check this JSFiddle entry (https://jsfiddle.net/NdVyJ/101/) to see this solution in action. Also check this JSFiddle entry across the browser. It works on all the major browsers, right?

It is very simple solution indeed. We basically remove the file element from the DOM and re-insert it again when user clicks on that “Clear” link. We tested this solution and it works across the browsers.

Please let us know if you are still facing problems and we would be very happy to assist you.