How to reset input type = "file" using JavaScript/jQuery?

How to reset input type = “file” using JavaScript/jQuery?

Last Updated : 14 May, 2019

Jquery:

Using wrap method in jquery:
The best way to reset input type=file is reseting the whole form. Wrap <input type = “file”> into <form> tags and reset the form:
Example-1:

<!DOCTYPE html>
<html>
  
<head>
    <title>reset input type = “file”</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <!-- jQuery code to show the
         working of this method -->
    <script>
        $(document).ready(function() {
            $('#resetbtn').on('click', function(e) {
                var $el = $('#infileid');
                $el.wrap('<form>').closest(
                  'form').get(0).reset();
                $el.unwrap();
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <form id="fid" name="formname">
            <p>
                <label>File</label>
                <input id="infileid" type="file">
            </p>
            <p>
                <button id="resetbtn" 
                        type="button">
                  Reset file
              </button>
            </p>
        </form>
    </center>
</body>
  
</html>

Output:
Before:

After:

Using file.value = ”:
The simplest way to reset the input is changing the filled value with nothing. this method is workes in every browser.
Example-2:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        reset input type = “file”
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <!-- jQuery code to show the
         working of this method -->
    <script>
        function resetFile() {
            const file =
                document.querySelector('.file');
            file.value = '';
        }
    </script>
</head>
  
<body>
    <center>
        <h2 style="color:green">
    GeeksforGeeks
  </h2>
        <input type="file" class="file" />
        <button onclick="resetFile()">
            Reset file
        </button>
    </center>
</body>
  
</html>

Output:
Before:

After:

JavaScript:

Using wrap method in jquery:
Wrap <input type = “file”> in to <form> tags and reset the form:
Example-3:

<!DOCTYPE html>
<html>
  
<head>
    <title>
      reset input type = “file”
  </title>
  
</head>
  
<body>
    <center>
        <h2 style="color:green">
          GeeksforGeeks
      </h2>
        <form id="fid" 
              name="formname">
            <p>
                <label>File</label>
                <input type="file">
            </p>
            <p>
                <button id="resetbtn" 
                        type="button" 
                        onClick="this.form.reset()">
                  Reset file
              </button>
            </p>
        </form>
    </center>
</body>
  
</html>

Output:
Before:

After:

My Personal Notes

Related Articles