How can I clear an HTML file input with JavaScript?

Question

I want to clear the file input in my form.

I know about setting the sources to the same method... But that method wont erase the selected file path.

Note: I would like to avoid having to reload the page, reset the form or perform an AJAX call.

Is this possible?

Answer 1

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);
        }
    }
}