Clear File Input Fields

Most browsers wont let you manipulate the value of a input element of type file. If you could there would be no way to prevent someone from changing the value of a file that user selects to anything they like. This is often a problem when designing a form that has to include a file upload element. On smaller forms it is easy enough to clear the entire form with a reset button but on a larger form what if the user just wants to clear that field? The example below shows a fairly strightforward way to do this.

In the following demo a user is presented with 5 file upload elements. When the user selects a file to upload the name of the file that they selected is displayed in a list. Clicking any of the items in the list will remove the item from the file upload box. Since you can't set the value of the box to "" (empty string), this is accomplished by deleting the existing box and replacing it with a new one. The only sticking point here is that in order to work with the element in Javascript with the DOM is has to be created through Javascript.

---

Try it

---

The javascript to create the initial input elements is inlined in the form:

<form name="demoForm" id="demoForm" enctype="multipart/form-data" onsubmit="return false;">
<script type="text/javascript">
var theform = document.getElementById("demoForm");
for (var i = 1; i < 6; i++){
    var newElem = document.createElement("input");
    newElem.setAttribute("type","file");
    newElem.setAttribute("id","demoFile" + i);
    newElem.setAttribute("name","demoFile" + i);
    newElem.onchange = Function("updateDemoFileList(" + i + ", this.value);");
    theform.appendChild(newElem);
    theform.appendChild(document.createElement("p"));
}
</script>

<p>
<input type="submit" value="Submit">
</p>
</form>

The two functions used to manipulate the list of input boxes and the list of the selected files are below. The first is the code to add the selected file name to the list and create the link to drop it from the list.

<script type="text/javascript">
    var linkArray = new Array(5); // the list of file names selected
    var linkCount = 0;            // the number of file names selected
    var theform = document.getElementById("demoForm");
    
    function updateDemoFileList(fileID, fileName){
        linkCount++;
        // parse out just the file name
        var lastSlash = fileName.lastIndexOf("\\");
        var fileName = fileName.substr(lastSlash + 1);
        
        // create the remove link
        linkArray[fileID - 1] = "<a href=\"javascript:removeLink(" + fileID + ");\">" + fileName + "</a><br/>";
                
        // reset the innerHTML
        var remLink = "Click on a file name to remove it<br />&nbsp;<br />";
        for (var i = 0; i < linkCount; i++){
            remLink += linkArray[i];
        }
        document.getElementById("uploadFileList").innerHTML = remLink;        
    }
            
    function removeLink(fileID){
        // remove the selected file from the file array
        var tempArray = new Array(10);
        for (var i = 0, j = 0; i < linkCount - 1; i++, j++){
            if (i == fileID - 1){
                j++;  // found the one to remove, move to the next item in the linkArray
            }
            tempArray[i] = linkArray[j];
        }        
        
        // remove the file element and add a new blank one
        var elemID = "demoFile" + fileID;        
        var remElem = document.getElementById(elemID);
        
        var newElem = document.createElement("input");
        newElem.setAttribute("type","file");
        newElem.setAttribute("id","demoFile" + fileID);
        newElem.setAttribute("name","demoFile" + fileID);
        newElem.onchange = Function("updateDemoFileList(" + fileID + ", this.value);");
        theform.replaceChild(newElem, remElem);        
                
        linkCount--;
        
        var remLink = "";
        if (linkCount > 0){
            remLink = "Click on a file name to remove it<br />&nbsp;<br />";
            for (var i = 0; i < linkCount; i++){
                remLink += tempArray[i];
            }
        }
        document.getElementById("uploadFileList").innerHTML = remLink;
    }
</script>

To add this to your own code the only thing you would need to do would be to change the counters in the functions to the number of file input elements you want to create. Everything else can remain the same. All we ask is that you reference this site where you use it.

---

If you have a question, comment, bug fix, or addition let us know. We'll add it to the demo with the proper credit. comments@directedinsight.com