How can I clear an HTML file input with JavaScript?

Question

There's 3 ways to clear file input with javascript:

1. set value property to empty or null.

   Works for IE11+ and other modern browsers.

2. Create an new file input element and replace the old one.

   The disadvantage is you will lose event listeners and expando properties.

3. Reset the owner form via form.reset() method.

   To avoid affecting other input elements in the same owner form, we can create an new empty form and append the file input element to this new form and reset it. This way works for all browsers.

I wrote a javascript function. demo: http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

tl;dr: For modern browsers, just use

input.value = '';

---

Old answer:

How about:

input.type = "text";
input.type = "file";

I still have to understand why this does not work with webkit.

Anyway, this works with IE9>, Firefox and Opera.
The situation with webkit is that I seem to be unable to change it back to file.
With IE8, the situation is that it throws a security exception.

Edit: For webkit, Opera and firefox this works, though:

input.value = '';

(check the above answer with this proposal)

I'll see if I can find a nice cleaner way of doing this cross-browser without the need of the GC.

Edit2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

Works with most browsers. Does not work with IE < 9, that's all.
Tested on firefox 20, chrome 24, opera 12, IE7, IE8, IE9, and IE10.

Setting the value to '' does not work in all browsers.

Instead try setting the value to null like so:

document.getElementById('your_input_id').value= null;

EDIT: I get the very valid security reasons for not allowing JS to set the file input, however it does seem reasonable to provide a simple mechanism for clearing already selecting output. I tried using an empty string but it did not work in all browsers, NULL worked in all the browsers I tried (Opera, Chrome, FF, IE11+ and Safari).

EDIT: Please note that setting to NULL works on all browsers while setting to an empty string did not.

Unfortunately none of the above answers appear to cover all the bases - at least not with my testing with vanilla javascript.

• .value = null appears to work on FireFox, Chome, Opera and IE11 (but not IE8/9/10)

• .cloneNode (and .clone() in jQuery) on FireFox appears to copy the .value over, therefore making the clone pointless.

So here is the vanilla javascript function I have written that works on FireFox (27 and 28), Chrome (33), IE (8, 9, 10, 11), Opera (17)... these are the only browsers currently available to me to test with.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

The ctrl parameter is the file input itself, so the function would be called as...

clearFileInput(document.getElementById("myFileInput"));