16

How to clear the textbox content in a FileUpload control in ASP.NET?

9 Answers 9

19

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

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

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

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

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

c. Recreate the innerHTML of the 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;
}
10

Hi nice trick but for me following worked instead of innerhtml

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

regards, Harish

5

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

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

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

3

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 2:

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

Recently I needed the same thing and neither of the suggested workarounds worked for me (in more than one browser). The tests I made were done on IE8 and Mozilla 6.0. The thing that worked in IE didn't work in Mozilla 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 all the possible variations - always calling getElementById, calling it only the first time, calling it twice... I tried with innerHTML, too but there was never a solution that worked on both browsers. That's why I came up with something 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;
        }
    }
}
2

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

File1Upload.ID = null;
1
  • this is simple method,but in my code have 3 file upload control i try with this ,but it clear all uploaded file instead of only one. Oct 23, 2013 at 9:52
2
Sub ClearAll()

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

    fuPics.Dispose
    fuDocs.Dispose

End Sub

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

0

You can clear the FileUpload control with response redirect back to page itself and you can store the file in a session variable 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 response redirect reinitializes the view state

-1

How about just

If (File1Upload.HasFile) Then File1Upload = Nothing

1
  • 4
    Tha's fine if you want to remove the control!
    – bgmCoder
    May 7, 2012 at 21:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.