Clearing <input type='file' /> using jQuery
file-io, forms, html, javascript, jquery
Solution
Easy: you wrap a `<form>` around the element, call reset on the form, then remove the form using `.unwrap()`. Unlike the `.clone()` solutions otherwise in this thread, you end up with the same element at the end (including custom properties that were set on it).
Tested and working in Opera, Firefox, Safari, Chrome and IE6+. Also works on other types of form elements, with the exception of `type="hidden"`.
window.reset = function(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input id="file" type="file">
<br>
<input id="text" type="text" value="Original">
</form>
<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>
JSFiddle
As Timo notes below, if you have the buttons to trigger the reset of the field inside of the `<form>`, you must call `.preventDefault()` on the event to prevent the `<button>` from triggering a submit.
EDIT
Does not work in IE 11 due to an unfixed bug. The text (file name) is cleared on the input, but its `File` list remains populated.
Problem
Is it possible to clear an `<input type='file' />` control value with jQuery? I've tried the following: ``` $('#control').attr({ value: '' }); ``` But it's not working.