Question

I am using Struts2 for a web application development. i have this particular problem for which i couldnt find a solution even after i googled.

I have 3 tags with a hyperlink or button against each, which has to be used to clear the filepath if anything was previously selected. The solution which was found online was to reset the form.. but then all the s:file tags will be cleared since all tags need to be in the same form.

Is there any way to clear a single file input on some click??

Answer 1

One solution similar to what we’ve used is to remove the input element and create a new input element in its place, with the same name.

EDIT: Here’s an example I threw together.

<script type="text/javascript">
    function clearFoo() {
        var inp = document.getElementById("foo");
        var parent = inp.parentNode;

        // Create the new input element.
        // Copy over any attributes you need.
        var newInp = document.createElement("input");
        newInp.type = "file";
        newInp.name = inp.name;

        // Replace the old node with the new node.
        parent.insertBefore(newInp, inp);
        parent.removeChild(inp);

        // The new node is the new "foo".
        newInp.id = "foo";
    }
</script>

<s:file id="foo" name="foo"/>

<button onclick="clearFoo();">Click</button>