CODEWITHSUNDEEP
asp.net
Sauron
Sauron

Reputation: 16923

Clear FileUpload Content in ASP.NET

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

Upvotes: 16

Views: 48926

Answers (9)

IjonTichy
IjonTichy

Reputation: 114

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

Upvotes: 0

amy
amy

Reputation: 21

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.

Upvotes: 2

Roooss
Roooss

Reputation: 634

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.

Upvotes: 5

Ebrima Sidibeh
Ebrima Sidibeh

Reputation: 21

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

File1Upload.ID = null;

Upvotes: 2

user1289360
user1289360

Reputation: 51

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;

Upvotes: 3

Chris
Chris

Reputation: 175

How about just

If (File1Upload.HasFile) Then File1Upload = Nothing

Upvotes: -1

Ivan Nikolov
Ivan Nikolov

Reputation: 793

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;
        }
    }
}

Upvotes: 2

Harish
Harish

Reputation: 101

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

Upvotes: 10

Cerebrus
Cerebrus

Reputation: 25775

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;
}

Upvotes: 19

Related Questions