When developing a HTML web form the input field should always be allowed to be cleared by the user. The problem is that there is no default value to erase the contents on the field without using some JavaScript. The easiest way to get or modify the content of an element is by using the innerHTML property.

innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browsers.

Using innerHTML to Clear File Input

Using innerHTML we can change the contents of an HTML element. Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element’s opening and closing tag. By changing an element’s innerHTML after some user interaction, you can make much more interactive pages.

The first step is to place our JavaScript within the of our document.

<script>
function clearFileInputField(tagId) {
    document.getElementById(tagId).innerHTML =
        document.getElementById(tagId).innerHTML;
    }
</script>

Once that is done we simply have to place our reset link HTML within the :

<div id="uploadFile_div">
    <input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>


VICTORY!

This was a pretty simple example for changing the HTML of an element. You can apply this theory to any field on a form and by manipulating an element’s innerHtml you’ll be able to change your text and HTML as much as you like.