How to Reset an <input type=”file”> in JavaScript or jQuery
Sometimes, you may want to clear a file that has been selected by the user in an <input type=”file”> field, without having to reload the entire page. This can be useful if the user wants to reselect a file or if you need to reset a form.
There are two main ways to reset a file input in JavaScript/jQuery:
Table of Content
1. Using jQuery’s wrap() Method
In this approach, we temporarily wrap the file input element inside a <form> element, then reset the form. By calling form.reset(), we can reset the file input, clearing any selected files.
Example: In this example, the wrap() method temporarily wraps the file input (#infileid) inside a form element. This allows the reset() method to clear the file input. Afterward, the unwrap() method removes the temporary form.
<!DOCTYPE html>
<html>
<head>
<title>Using wrap Method</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) {
let $el = $('#infileid');
$el.wrap('<form>').closest(
'form').get(0).reset();
$el.unwrap();
});
});
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<form id="find" name="formname">
<p>
<label>File</label>
<input id="infileid" type="file">
</p>
<p>
<button id="resetbtn" type="button">
Reset file
</button>
</p>
</form>
</body>
</html>
Output:
How to reset input type = “file” using JavaScript/jQuery?
Explanation:
- The file input (<input type=”file” id=”infileid”>) is temporarily wrapped in a form using $(‘#infileid’).wrap(‘<form>’).
- We call form.reset() on the wrapped form to clear the file input.
- After resetting, the file input is “unwrapped” from the temporary form using $(‘#infileid’).unwrap().
2. Using file.value = ”
This is a simpler and more direct approach. You can reset the file input by setting its value property to an empty string, which removes any selected files.
Example: In this example, we use JavaScript to reset a file input. The resetFile() function targets the file input element with the class .file and clears its value, effectively resetting the file selection.
<!DOCTYPE html>
<html>
<head>
<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>
<h2 style="color:green">
GeeksforGeeks
</h2>
<input type="file" class="file" />
<br>
<button onclick="resetFile()">
Reset file
</button>
</body>
</html>
Output:
How to reset input type = “file” using JavaScript/jQuery?
Explanation:
- The file input (<input type=”file” class=”file”>) is selected using document.querySelector().
- By setting the value property of the file input to an empty string (”), the file selection is cleared, and the input is reset.
