How to reset file input with jQuery

Michael Ryvkin
49 49

There is no standard method to clear file input element (<input type="file">) without resetting the whole form. However there is elegant way to do it with just a few lines of code using 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

jQuery DataTables: Row selection using checkboxes and Select extension
jQuery DataTables: Row selection using checkboxes
jQuery DataTables: Why click event handler does not work
jQuery DataTables: Alphabetical Search
Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

Comments

  3. Use simple:

    $('#btn-example-file-reset').on('click', function(e){
    $('#example-file').val("");
});
    Reply

    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.

      Reply

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

    Reply

Leave a Reply

(optional)

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