how to reset (clear) file input

Question

how can I reset file input in IE, I used the following and it worked in chrome and FF but not IE

fileInputElement.value=""

what's the alternative in IE ?

Solution 1

If fileInputElement is on its own in the form fileInputForm, you can do:

window.fileInputForm.reset();

Otherwise for IE you'll have to replace the element with a clone:

fileInputElement.parentNode.replaceChild(
    fileInputElement.cloneNode(true), 
    fileInputElement
);

Solution 2

SOLUTION

The following code worked for me with jQuery. It works in every browser and allows to preserve events and custom properties.

var $el = $(fileInputElement);
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

See this jsFiddle for code and demonstration.

LINKS

• Clearing <input type='file' /> using jQuery

• How to reset file input with JavaScript

Solution 3

Cross-Browser solution by @Gyrocode.com in vanilla JS:

var clearFileInput = function (input) {
  if (!input) {
    return;
  }

  // standard way - works for IE 11+, Chrome, Firefox, webkit Opera
  input.value = null;

  if (input.files && input.files.length && input.parentNode) {
    // workaround for IE 10 and lower, pre-webkit Opera

    var form = document.createElement('form');
    input.parentNode.insertBefore(form, input);

    form.appendChild(input);
    form.reset();

    form.parentNode.insertBefore(input, form);
    input.parentNode.removeChild(form);
  }

}

Solution 4

You can't reset the File input by itself. What you can do is wrap your File input in a <form id="form_id"> tag and reset the form. With jQuery you can do $('#form_id')[0].reset(); and in JavaScript you can do document.getElementById('form_id').reset().

View more solutions