Cannot get Asyncfileupload to fire UploadComplete event... :(

hey everyone!

I cannot get the asyncfileupload to fire the uploadcomplete event at all.

I did a test:

<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> Protected Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsyncFileUpload1.UploadedComplete</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> Dim currentUser As MembershipUser = Membership.GetUser()</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> Dim currentUserId As Guid = CType(currentUser.ProviderUserKey, Guid)</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> errorLabel.Text = "Test"</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> End Sub</div>

Protected Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsyncFileUpload1.UploadedComplete

errorLabel.Text = "Test"

End Sub

and... nothing.

The background turns green, my throbber activates successfully.. but then, I get nothing. It doesnt even make it to the uploadedComplete event.

I also did the same test in the error event.. and still nothing. Any ideas??

Re: Cannot get Asyncfileupload to fire UploadComplete event... :(

I 'think' this may be because the .js code is reliant on the browser being capable of HTML5 (this is one of the new DOM events from memory).

What browser are you testing with?

Re: Cannot get Asyncfileupload to fire UploadComplete event... :(

Chrome. and IE8

Re: Cannot get Asyncfileupload to fire UploadComplete event... :(

Please refer this

http://forums.asp.net/p/1479689/3461051.aspx

http://forums.asp.net/p/1546913/3783061.aspx

http://forums.asp.net/p/1576297/3959887.aspx

Re: Cannot get Asyncfileupload to fire UploadComplete event... :(

I enabled some trace debugging, and here is the streamed error:

<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">Webpage error details</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.5; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E; AskTbBT5/5.8.0.12304)</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">Timestamp: Thu, 2 Sep 2010 14:50:20 UTC</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">Message: '$common' is null or not an object</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">Line: 1</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">Char: 4137</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">Code: 0</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">URI: http://dmbdating.com/dmbdating/ScriptResource.axd?d=oGfO0n1SoeuBwgSTL_fgNNvEtyaZoqgTmFvtXOlrsq9x0PaD7M3gV2SO2-R5Y2mKHSVHULUbLJbsnD4tn1KzAQ2&t=ffffffff83c1d743</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div>

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.5; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E; AskTbBT5/5.8.0.12304)

Timestamp: Thu, 2 Sep 2010 14:50:20 UTC

Message: '$common' is null or not an object

Line: 1

Char: 4137

Code: 0

URI: http://EDITED.COM/EDITED/ScriptResource.axd?d=oGfO0n1SoeuBwgSTL_fgNNvEtyaZoqgTmFvtXOlrsq9x0PaD7M3gV2SO2-R5Y2mKHSVHULUbLJbsnD4tn1KzAQ2&t=ffffffff83c1d743

If this helps.. let me know. Cause Im stuck. lol.

Re: Cannot get Asyncfileupload to fire UploadComplete event... :(

Hi,

Please make sure you are setting right for the Asyncfileupload:

<script type="text/javascript">
        function fillCell(row, cellNumber, text) {
            var cell = row.insertCell(cellNumber);
            cell.innerHTML = text;
            cell.style.borderBottom = cell.style.borderRight = "solid 1px #aaaaff";
        }
        function addToClientTable(name, text) {
            var table = document.getElementById("<%= clientSide.ClientID %>");
            var row = table.insertRow(0);
            fillCell(row, 0, name);
            fillCell(row, 1, text);
        }
        

        function uploadError(sender, args) {
            addToClientTable(args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>");
        }
        function uploadComplete(sender, args) {
            var contentType = args.get_contentType();
            var text = args.get_length() + " bytes";
            if (contentType.length > 0) {
                text += ", '" + contentType + "'";
            }
            addToClientTable(args.get_fileName(), text);
        }
    </script>


    <div class="demoarea">
        <div class="demoheading">AsyncFileUpload Demonstration</div>
        Click '<i>Select File</i>' for asynchronous uploading.
        <br /><br />
        

        <ajaxToolkit:AsyncFileUpload
            OnClientUploadError="uploadError" OnClientUploadComplete="uploadComplete"
            runat="server" ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
            UploadingBackColor="#CCFFFF" ThrobberID="myThrobber"
             /> <asp:Label runat="server" ID="myThrobber" style="display:none;" ><img align="absmiddle" alt="" src="uploading.gif" /></asp:Label>
        <div><strong>The latest Server-side event:</strong></div>
        <asp:Label runat="server" Text=" " ID="uploadResult" />
        <br /><br />
        <div><strong>Client-side events:</strong></div>
        <table style="border-collapse: collapse; border-left: solid 1px #aaaaff; border-top: solid 1px #aaaaff;" runat="server" cellpadding="3" id="clientSide" />
    </div>

Re: Cannot get Asyncfileupload to fire UploadComplete event... :(

I'm self-taught, so my terminology might be a little off, but I'll try to explain this prob.

Basically some people are forgetting this is an ASYNCHRONOUS uploader, using AJAX, so only the uploader is posting back to the server.

When the uploader completes and fires off the server-side onuploadedcomplete event, it cannot update the rest of the page (but you can do server-side things like save, rename, move the file, make a DB entry, etc.). That is why there are client-side/javascript events you can specify (OnClientUploadError, OnClientUploadStarted, OnClientUploadComplete) with it that if you want anything to happen on the client side (display success text, change graphics, etc.) you have to do it using javascript.

Same thing when you try to fire off some javascript from a server-side button event when using AJAX.

Solution? You might want to remove AJAX from the page (remove updatepanel) and see if you can get it to work then. Of course then you lose the benefits of AJAX and asynchronous stuff =/

Hope this helps.

Re: Cannot get Asyncfileupload to fire UploadComplete event... :(

Had the same issue.

download asp ajax toolkit 3.5 ( you will notice it shows 3.5.0.4 and talks about version 4 in your browser),
remove all dll from your project
remove component in palette to make sure you are not using old ones
add it again (browse to the ajax dll) and add all object, it would happen you change version of your Ajax toolkit.
in that version scriptmanager does not exist anymore, instead you have ToolKitScriptmanager, drag one and you won't get the error anymore. (make sure you only have one, clear all existing in master page or other)