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!

Didn't help. All examples I have seen have the control inside update panel. Also, the client script forces a postback. — NoBullMan, Jul 28 '17 at 14:04
but why you posting back page in JS. instead remove update panel and use SciptManager. — Ravikumar, Jul 28 '17 at 14:14
if I don't do a postback, I cannot save the file or do any post-upload processing, like maybe add the uploaded document's info to a data table to populate a repeater that shows uploaded files. Also, when I did remove the update panel it did not make a difference; server side UploadComplete did not get hit. — NoBullMan, Jul 28 '17 at 14:24
Visit https://www.aspsnippets.com/Articles/Using-ASP.Net-AJAX-Control-Toolkits-AsyncFileUpload-Control.aspx once. — Ravikumar, Jul 28 '17 at 14:26
Thank you Ravikumar; my question is not how to set up a file upload control; it is why server method UploadComplete is not fired. — NoBullMan, Jul 28 '17 at 14:55

score 0 · Accepted Answer · answered Jul 30 '17 at 16:29

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.

AsyncFileUpload does not fire server side UploadComplete

1 Answers1