Clear upload file input field

At Thursday, April 23, 2009

ADSENSE HERE!

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>
            

ADSENSE HERE!