How to reset HTML file input control

HTML file input control is commonly use to upload files. The sample control looked like this.

Equivalent sample HTML:

<input type="file" file-model="myFile" id = "uploadCaptureInputFile" required />

<span>class="help-block">Max file size 2Mb</span>

There are few ways to reset the HTML file input control.

1. Using Javascript

Make sure you assign the id to your control. At the code that trigger reset, reset the value.

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

If you're using jQuery, the equivalent object id will be $('#uploadCaptureInputFile').value = "";

2. Using Form Reset

Make sure your input control is placed in the same form tag. You can create a button type="reset". Upon clicking of the reset button, the input control will be reset as well. See these example & example2

The HTML Code is quite simple.

<button type="reset" value="Reset">Reset</button>

Method 2 are more rigid as it will reset all inputs within the form. Hope it helps.