Bogdan Gusiev's blog

How to make good software for people


Clear upload file input field
23 Apr 2009

Many web developers came to the problem that they are not able to change value of file input field from Java Script in the web application. There is no access to value field of file input tag because of security restriction. However there is a trick how to erase this field if you need it in your application.

You can simply redraw the html block where your input tag is located. In this case all data will remain the same except the selected file value.

<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>
Java Script function below looks strange but acts exactly in the way we want:
 
<script>
function clearFileInputField(tagId) {
    document.getElementById(tagId).innerHTML = 
                    document.getElementById(tagId).innerHTML;
}
</script>
            

javascript howto input file html