How to reset file input with jQuery


You need to reset file input element (<input type="file">) in a complex form without affecting other elements.


Set element’s value to empty string, for example $('#example-file').val('').

Alternative solution for older browsers

  • Wrap a new <form> element around <input type="file"> element using wrap() method
  • Reset newly added <form> element with our file upload control using reset() method
  • Remove newly added <form> element from the DOM using unwrap() method

The benefit of this method is that it preserves the original <input type="file"> element and therefore allows to retain existing event handlers attached to it.


You May Also Like


  1. Use simple:

    $('#btn-example-file-reset').on('click', function(e){
    1. Thank you for your comment. Your suggestion is cleaner and seems to work in the latest browsers, although I haven’t tested all possible use cases. I have updated the article.

  2. I like the solution, but what if I want the file name to remain even when I update cookies in my program? 

Leave a Reply


This site uses Akismet to reduce spam. Learn how your comment data is processed.