[ACCEPTED]-Clear FileUpload Content in ASP.NET-asp.net

The ASP.NET FileUpload control maps to the HTML input element 9 with type="file". This element is considered Read-only 8 and you cannot change it directly.

However, there 7 seem to be atleast three workarounds to 6 accomplish the goal of "clearing the 5 field" :

a. Reset the form, either using 4 script or by providing a input type="reset" button.

b. Re-establish 3 the input field in the DOM by setting its 2 attributes again:

var fu = document.getElementById("fileUpload");
if (fu != null)
{
  fu.setAttribute("type", "input");
  fu.setAttribute("type", "file");
}

c. Recreate the innerHTML of the 1 field from the existing innerHTML as demonstrated here:

var fu = document.getElementById("fileUpload");
if (fu != null)
{
  // You may be able to use the cached object in `fu`, but I'm not sure.
  document.getElementById("fileUpload").innerHTML = fu.innerHTML;
}

Hi nice trick but for me following worked 1 instead of innerhtml

            var fu = document.getElementById("flUpload");
            if (fu != null) {
                document.getElementById("flUpload").outerHTML = fu.outerHTML;
            }

regards, Harish

I have just Used the following in the Button 4 click event in the code behind ...

protected void btnReset_Click(object sender, EventArgs e)
{
    flUpload = new FileUpload();
}

The postback 3 caused by the button click allows a page 2 refresh and creates a new instance of the 1 FileUpload control.

These worked on FF, Chrome, IE7/8/9

//Method 1

var fu = $('#docUpload')[0];  
fu.value="";

var fu2= fu.cloneNode(false);
fu2.onchange= fu.onchange;
fu.parentNode.replaceChild(fu2,fu);

OR: //Method 1 2:

document.getElementById('docUpload').outerHTML =     
    document.getElementById('docUpload').outerHTML;

Recently I needed the same thing and neither 11 of the suggested workarounds worked for 10 me (in more than one browser). The tests 9 I made were done on IE8 and Mozilla 6.0. The 8 thing that worked in IE didn't work in Mozilla 7 and vice versa.

In IE:

var fu = document.getElementById("<%= fileUploadImage.ClientID %>");
if (fu != null) {    
    fu.setAttribute("type", "input");
    fu.setAttribute("type", "file");
}

In Mozilla:

var fu = document.getElementById("<%= fileUploadImage.ClientID %>");
if (fu != null) {        
    fu.outerHTML = fu.outerHTML;
}

I tried 6 all the possible variations - always calling 5 getElementById, calling it only the first time, calling 4 it twice... I tried with innerHTML, too but there 3 was never a solution that worked on both 2 browsers. That's why I came up with something 1 like:

function clearFileUpload() {
    var fu = document.getElementById("<%= fileUploadImage.ClientID %>");
    if (fu != null) {
        try {
            fu.setAttribute("type", "input");
            fu.setAttribute("type", "file");
        }
        catch (ex) {
            fu.outerHTML = fu.outerHTML;
        }
    }
}

A simple approach that works for internet 1 explorer and Firefox - in c# behind code:

File1Upload.ID = null;

Sub ClearAll()

    txtExample.Text=""
    txtInfo.Text=""

    fuPics.Dispose
    fuDocs.Dispose

End Sub

This sub works to clear the contents of 4 the file upload control text field when 3 the sub is called from a button such as 2 btnClear. The above code works in asp.net visual 1 web pages.

You can clear the FileUpload control with 5 response redirect back to page itself and 4 you can store the file in a session variable 3 you can use on the next round trip.

protected void PageLoad(EventArgs e){



   if(FileUpLoadControlId.HasFile)
    {
        Session["data"]=FileUpLoadControlId.PostedFile.InputStream;

        Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri, true);
     }

    else if( Session["data"]!=null)
    {

         //massage data here 

         //and post back
         Session["data"]=null;
         Response.Redirect(HttpContext.Current.Request.Url.AbsoluteUri, true);

    }

 }

The 2 response redirect reinitializes the view 1 state