How to clear value of asyncfileupload .. text field?

Question

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

The asyncfileupload function view functionality works fine, no problem. But after the postback, if I click on MyButton again, a popup will appear with the previous path in the asyncfileupload control text box.

How to clean it ...!

Thanks in advance.

Answer 1

None of the proposed methods worked for me. The problem is not with AsyncFileUpload , but with 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 2

Set the AsyncFileUpload handle attribute to OnClientUploadComplete = "UploadComplete" and use the following JS:

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

You can also apply any actions / styles to the fileInputElement element.

Answer 3

To extend ador answer above:

 function uploadComplete(sender, args) { var uploadField = $(sender.get_element()).find("input[type='file']"); uploadField[0].form.reset(); uploadField.each(function () { $(this).css("background-color", "white"); }); } 

Answer 4

Assuming you are using a control from the Ajax Control Toolkit, you can connect to the OnClientUploadedComplete handle, which is called on the client side after the download is complete. You want to call hide on a modal popup

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

Answer 5

this worked for me if you are trying to clear the 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 6

This is the fix for Jmoon's answer. This is useful if you want to clear AsyncFileUpload text after the download is 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 7

This will explicitly clear the text box:

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