How to reset file input with jQuery

Problem

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

Solution

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.

Demo

You May Also Like

Comments

  1. Use simple:

    $('#btn-example-file-reset').on('click', function(e){
        $('#example-file').val("");
    });
    
    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

(optional)

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