How to Reset an <input type="file"> in JavaScript or jQuery
Last Updated :
20 Sep, 2024
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:
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.
HTML
<!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.
HTML
<!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.
Similar Reads
How to check input file is empty or not using JavaScript/jQuery ? Given an HTML document containing an input element, the task is to check whether an input element is empty or not with the help of JavaScript. These are the two approaches to check input file is empty or not using JavaScript/jQuery: Table of Content Using element.files.length property in JavaScript
2 min read
How to download File Using JavaScript/jQuery ? The ability to download files directly from a website is an essential feature for many web applications. Whether you're providing documents, images, or other data, enabling users to download files seamlessly enhances their experience and ensures they can access the content offline. This article prov
2 min read
How to read a local text file using JavaScript? JavaScript can read local files using the File API, which is supported by most modern browsers. The File API allows JavaScript to read the contents of files chosen by the user, typically through an HTML file input element.The File object represents a file (like a text file or image) selected by the
6 min read
How to reset selected file with input tag file type in Angular 9? To reset the selected file with input tag file type, we can implement a method which on invocation will clear the selected file. Approach: Set the id of your input using '#' to make it readable inside the component.Now in the component we can use ViewChild directive to read the value of the input fr
2 min read
How To Save Text As a File in HTML CSS and JavaScript? In this tutorial, we will learn how to save user input as a text file using HTML, CSS, and JavaScript. This can be particularly useful for web applications where users need to download their input or notes as a file.Project PreviewWe will build a simple web page that allows users to enter text in a
2 min read