Clearing the value of ASP.Net 2.0 File Upload Control using javascript that works on all browser?

Question

We are running following javascript function:

function btn_AddToList_Click() {

var filePath = document.getElementById("FileUpload").value;

if(filePath.length > 0) {

    var opt = new Option(filePath,filePath);    
    var listBox = document.getElementById("ListBox");
    listBox.options[listBox.options.length] = opt;
 }

}

Function binding:

protected void Page_Load(object sender, EventArgs e) {

    if (!IsPostBack)
    {
        btn_AddToList.Attributes.Add("onclick", "btn_AddToList_Click(); return false;");
    }

}

HTML:

asp:FileUpload ID="FileUpload" runat="server" Width="394px"

asp:ListBox ID="ListBox" runat="server" Width="394px"

asp:Button ID="btn_AddToList" runat="server" Enabled="true" Text="Add"

Issue is that value of "FileUpload" is not get cleared after we click "Add" button. Any help?

Answer 1

You can not set/clear the value of FileUpload control programmatically. That is a restriction for a security reason. Consider this if this restriction was not there, you could set the value of FileUpload control to some arbitrary file and upload it to your server. You won't be able to achieve this in current shape.

As a work around you can try to bring another textbox exactly on top of textbox part of FileUpload control. This way you will be give the same feeling what you are trying to achieve. But that is also not ideal and may not work properly.