how to clear the textbox value of asyncfileupload

Question

There is one button(MyButton). OnClick of this button a modalpopup(MyPopup) appears with one asyncfileupload ajax control, Ok button and Cancel button.

The browse functionality of the asyncfileupload functionality is working fine, No problem. But after postback, if I click the MyButton again, the popup appearing with the previous path in the asyncfileupload control's textbox.

How to clear it ... !

Thanks in advance.

Answer 1

this worked for me if you're attempting to clear it client side.

<script type = "text/javascript">
function clearContents() {
    var AsyncFileUpload = $get("<%=AsyncFileUpload1.ClientID%>");
    var txts = AsyncFileUpload.getElementsByTagName("input");
    for (var i = 0; i < txts.length; i++) {
        if (txts[i].type == "file") {
            txts[i].value = "";
            txts[i].style.backgroundColor = "transparent";
        }
    }
}

function uploadComplete(sender) {
    clearContents();
}
</script>

Answer 2

None of the proposed ways worked for me. The problem is not specific to AsyncFileUpload, but to the input[type=file].

Finally, I found a way that worked for me with javascript:

function uploadComplete(sender, args) {
    jQuery(sender.get_element()).find("input[type='file']")[0].form.reset();
}

Answer 3

This is a correction for the Jmoon's answer. This is usefull if you want to clear AsyncFileUpload text not after upload complete but after some other user action.

function clearContents() {
    var AsyncFileUpload = $("#<%=AsyncFileUpload1.ClientID%>")[0];
    var txts = AsyncFileUpload.getElementsByTagName("input");
    for (var i = 0; i < txts.length; i++) {
        txts[i].value = "";
        txts[i].style.backgroundColor = "transparent";
    }
}

Answer 4

Set up attribute of AsyncFileUpload descriptor to OnClientUploadComplete="UploadComplete" and use next JS:

function UploadComplete(sender, arg2) {
  // clear file
  var fileInputElement = sender.get_inputFile();
  fileInputElement.value = "";
}

You can apply any actions/styles to the "fileInputElement" too.

Answer 5

This will definitely clear the textbox:

var AsyncFileUpload = $get("<%=AsyncFileUpload1.ClientID%>");
    var txts = AsyncFileUpload.getElementsByTagName("input");
    for (var i = 0; i < txts.length; i++) {
        if (txts[i].type == "file") {
            txts[i].style.backgroundColor = "transparent";
            txts[i].form.reset();
        }
    }

Answer 6

Assuming you're using the control from Ajax Control Toolkit you can hook into the OnClientUploadedComplete handle which is called on the client side once the upload is complete. You want to call hide on the modal popup

 var modalPopupBehavior = $find('popupID');
 modalPopupBehavior.hide();