how to reset

how to reset

I am developing a metro app with VS2012 and Javascript
I want to reset the contents of my file input:

How should I do that?

Solutions/Answers:

Solution 1:

The jQuery solution that @dhaval-marthak posted in the comments obviously works, but if you look at the actual jQuery call it’s pretty easy to see what jQuery is doing, just setting the value attribute to an empty string. So in “pure” JavaScript it would be:

document.getElementById("uploadCaptureInputFile").value = "";

Solution 2:

You need to wrap <input type = “file”> in to <form> tags and then you can reset input by resetting your form:

onClick="this.form.reset()"

Solution 3:

This is the BEST solution:

input.value = ''

if(!/safari/i.test(navigator.userAgent)){
  input.type = ''
  input.type = 'file'
}

Of all the answers here this is the fastest solution. No input clone, no form reset!

I checked it in all browsers (it even has IE8 support).

Solution 4:

You can just clone it and replace it with itself, with all events still attached:

<input type="file" id="control">

and

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};

Thanks : Css-tricks.com

Solution 5:

In case you have the following:

<input type="file" id="fileControl">

then just do:

$("#fileControl").val('');

to reset the file control.

Solution 6:

Another solution (without selecting HTML DOM elements )

If you added ‘change’ event listener on that input, then in javascript code you can call (for some specified conditions):

event.target.value = '';

For example in HTML:

<input type="file" onChange="onChangeFunction(event)">

And in javascript:

onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // assuming that this file has any extension

  if (extension === 'jpg') {
    alert('Good file extension!');
  }
  else {
    event.target.value = '';
    alert('Wrong file extension! File input is cleared.');
  }