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

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

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

Recommended Posts: