Clear/Reset file input on page load?

Question

I need to clear a file upload input field when the page loads. I have looked at 10-15 various ways to do this via stackoverflow, however every suggestion includes a reset button where I want to clear it on page load so that it is reset/cleared if a user clicks the back button on their browser.

I am currently using this code to reset the entire form, it works well for all of the dropdowns however it does not clear the file input field

function init() {
    // Clear forms here
    //reset inputs
$('#upload_form').trigger("reset");
//reset upload form

}

window.onload = init;

From my researh this seems to have the most upvotes from the community Clearing <input type='file' /> using jQuery

Cheers!

score 5 · Accepted Answer · answered May 11 '14 at 05:55

5

You don't need jQuery for that:

function init() {
  document.getElementById("upload_form").reset();
}

window.onload = init;

answered May 11 '14 at 05:55

1ace

5,272
4
23
30

It does work on my computer, if the input is in a `
`: http://jsfiddle.net/BZjfL/2/
– 1ace May 11 '14 at 06:05

Miguel Mota · Answer 2 · 2018-09-25T07:52:10.600

2

One way to reset the file input type field is to replace it with a new one:

function reset() {
    var input = document.querySelector('.file-input');
    var newInput = input.cloneNode(true);
    input.parentNode.replaceChild(newInput, input);
}

Example

http://jsfiddle.net/d25nV/

edited Sep 25 '18 at 07:52

answered May 11 '14 at 05:53

Miguel Mota

20,135
5
45
64

There's no need to alter the DOM for that. – 1ace May 11 '14 at 05:55
Not me: although it's unnecessarily complex, it's not wrong. – 1ace May 11 '14 at 06:08

Clear/Reset file input on page load?

2 Answers2