AsyncFileUpload does not fire server side UploadComplete

Question

I have an AsyncFileUpload control inside an update panel in a page that is using a master page. When I select a file, the client side OnClientUploadComplete fires but not the server side. I searched the issue and tried different suggestions, including adding a hidden button outside update panel and "click" it on client script to force an async postback as well as modifying the "form" tag on master page to include encrypt type but nothing seems to be working.

In aspx file I have:

<script type="text/javascript">
    function onClientUploadComplete(sender, e) {debugger
        var ct = e.get_contentType();
        var fn = e.get_fileName();
        var l = e.get_length();
        var p = e.get_path();
        document.getElementById('uploadCompleteInfo').innerHTML = '';
        __doPostBack('upnlNews', '');
    }

    function onClientUploadStart(sender, e) {
        document.getElementById('uploadCompleteInfo').innerHTML = 'Please wait while uploading ' + e._fileName;
    }
</script>

<asp:UpdatePanel runat="server" ID="upnlNews">
    <ContentTemplate>
        <ajaxToolkit:AsyncFileUpload runat="server" ID="fuAttchedDocs"
            ThrobberID="myThrobber" 
            UploaderStyle="Traditional" 
            OnClientUploadComplete="onClientUploadComplete"
            onuploadedcomplete="fuAttchedDocs_UploadedComplete" 
            onuploadedfileerror="fuAttchedDocs_UploadedFileError" />
        <asp:Label runat="server" ID="myThrobber" Style="display: none;">
           <img align="middle" alt="" src="../assets/images/6.gif" />
        </asp:Label>
        <div id="uploadCompleteInfo"></div><br />
    </ContentTemplate>
</asp:UpdatePanel>

Additional Info when I put a breakpoint in client side script and check the variables in Chrome Developer Tool, I see the following:

function onClientUploadComplete(sender, e) {debugger
    var ct = e.get_contentType();   ==> ct = ""
    var fn = e.get_fileName();      ==> fn = "spock.jpg"
    var l = e.get_length();         ==> l = "NaN"
    var p = e.get_path();           ==> p = "C:\fakepath\spock.jpg"
    document.getElementById('uploadCompleteInfo').innerHTML = '';
    __doPostBack('upnlNews', '');
}

The fact that file length shows as NaN is a bit fishy!

Answer 1

I found out that the UI designer had added a Search text box and button combo and had contained them in a <form>...</form> tag; so the page two <form> tags, one contained within the other (main page form tag and this one). This broke the code. I realized that when I found that even a regular button would not fire its OnClick event. After I changed the form tags to div everything worked fine.