Ajax Uploader - Uploader_FileUploaded server event not firing

Last post 06-21-2011, 1:25 AM by Kenneth. 5 replies.
Sort Posts: Previous Next
  •  06-16-2011, 7:57 AM 67997

    Ajax Uploader - Uploader_FileUploaded server event not firing

    Hello,
     
    I am using an ajax uploader control and setting the manual start upload to true.  My exact code is below.  When I use this code on a page that does not have any Jquery ajax calls everything works fine and the file that I select for upload gets uploaded to my C drive when my submit button is clicked.  If I use the same code within a page that makes Jquery ajax calls, the 
    Uploader_FileUploaded event is never hit, the progress bar turns green and it looks like it uploads the file that I selected for upload when the submit button is clicked but the file does not end up in my C drive.  It is probably being uploaded to some default temporary location which I don't know or it is not actually getting uploaded.  Any reason why the 
    Uploader_FileUploaded event would not get fired on a page that uses Jquery Ajax and would get fired on a page that does not have any Jquery ajax calls? Also, by default where does the Ajax uploader control upload files if I don't specify a different directory in the 
    Uploader_FileUploaded event?
     
     
    Thank you. 
     
     
     
    <script runat="server">
        'Private Sub InsertMsg(ByVal msg As String)
        '    ListBoxEvents.Items.Insert(0, msg)
        '    ListBoxEvents.SelectedIndex = 0
        'End Sub
        Private Sub SubmitButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            'InsertMsg("You clicked the Submit Button.")
            'InsertMsg("You have uploaded " & uploadcount & "/" & Uploader1.Items.Count & " files.")
        End Sub
        Private uploadcount As Integer = 0
        Private Sub
    <script runat="server">
        'Private Sub InsertMsg(ByVal msg As String)
        '    ListBoxEvents.Items.Insert(0, msg)
        '    ListBoxEvents.SelectedIndex = 0
        'End Sub
        Private Sub SubmitButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            'InsertMsg("You clicked the Submit Button.")
            'InsertMsg("You have uploaded " & uploadcount & "/" & Uploader1.Items.Count & " files.")
        End Sub
        Private uploadcount As Integer = 0
        Private Sub Uploader_FileUploaded(ByVal sender As Object, ByVal args As UploaderEventArgs)
            uploadcount += 1
            'InsertMsg("File uploaded! " & args.FileName & ", " & args.FileSize & " bytes.")
        
            'Copys the uploaded file to a new location. 
            
            args.CopyTo("C:\\" & Date.Now.ToShortDateString().Replace("/", "") + ".pdf")
            'You can also open the uploaded file's data stream. 
            'System.IO.Stream data = args.OpenStream(); 
        End Sub
        Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)
            'SubmitButton.Attributes("itemcount") = Uploader1.Items.Count.ToString()
        
            MyBase.OnPreRender(e)
        End Sub
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <a href="DefaultPage.aspx" target="_blank">Launch CFN Workflow tool</a><br /><br />
        <a href="GetCaseResults.aspx" target="_blank">Launch Results Directly</a>
        </div>
        <div>
         <%--<CuteWebUI:UploadAttachments runat="server" ID="Uploader">                
             </CuteWebUI:UploadAttachments>--%>
        </div>
           <div id="divNCO" runat="server" class="Collapse">
        <%--<input id="cancelUpload" value="Cancel this upload" onclick="cancel_upload()" />--%>
        <table>
            <tr>
                <td colspan="2" align="left"><textarea id="txtArea" cols="50" rows="10"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="left"><asp:RadioButtonList ID="rblNCO" runat='server' CssClass="rblNCO" RepeatDirection="Horizontal">
                    <asp:ListItem Value="0" Text="Case owner can now resolve this case"></asp:ListItem>
                    <asp:ListItem Value="1" Text="This is a comment/question"></asp:ListItem>
                </asp:RadioButtonList></td>
    </tr>
            <tr>
                <td align="left"><CuteWebUI:UploadAttachments runat="server" ID="Uploader1" ManualStartUpload="true" MaxFilesLimit="3" MaxFilesLimitMsg="You can only upload 3 files at a time" ValidateOption-AllowedFileExtensions="pdf, tif" InsertText="Attach Files" InsertButtonStyle-CssClass="float:left;" OnFileUploaded="Uploader_FileUploaded">                               
             </CuteWebUI:UploadAttachments></td>
             <td valign="top">            
                <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"
                    Text="Submit" OnClick="SubmitButton_Click" />
                <asp:Button ID="btnCancelNCODiv" runat="server" text="Cancel" CssClass="FloatRight" />
             </td>
            </tr>        
        </table>    
            
        </div>
        </form>
    </body>
    </html>
    <script type="text/javascript">
        function submitbutton_click() {
            var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
            var uploadobj = document.getElementById('<%=Uploader1.ClientID %>');
            if (!window.filesuploaded) {
                if (uploadobj.getqueuecount() > 0) {
                    alert("starting upload");
                    uploadobj.startupload();
                    alert("done upload");
                }
                else {
                    var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;
                    if (uploadedcount > 0) {
                        return true;
                    }
                    alert("Please browse files for upload");
                }
                return false;
            }
            window.filesuploaded = false;
            return true;
        }
        function CuteWebUI_AjaxUploader_OnPostback() {
            window.filesuploaded = true;
            var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
            var tmp = '<%=SubmitButton.ClientID %>';
            alert('id = ' + tmp);
            submitbutton.click();
            return false;
        }
    //    function CuteWebUI_AjaxUploader_OnSelect(files) {
    //        alert("CuteWebUI_AjaxUploader_OnSelect");
    //    }
                </script>
    (ByVal sender As Object, ByVal args As UploaderEventArgs)
            uploadcount += 1
            'InsertMsg("File uploaded! " & args.FileName & ", " & args.FileSize & " bytes.")
        
            'Copys the uploaded file to a new location. 
            
            args.CopyTo("C:\\" & Date.Now.ToShortDateString().Replace("/", "") + ".pdf")
            'You can also open the uploaded file's data stream. 
            'System.IO.Stream data = args.OpenStream(); 
        End Sub
        Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)
            'SubmitButton.Attributes("itemcount") = Uploader1.Items.Count.ToString()
        
            MyBase.OnPreRender(e)
        End Sub
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <a href="DefaultPage.aspx" target="_blank">Launch CFN Workflow tool</a><br /><br />
        <a href="GetCaseResults.aspx" target="_blank">Launch Results Directly</a>
        </div>
        <div>
         <%--<CuteWebUI:UploadAttachments runat="server" ID="Uploader">                
             </CuteWebUI:UploadAttachments>--%>
        </div>
           <div id="divNCO" runat="server" class="Collapse">
        <%--<input id="cancelUpload" value="Cancel this upload" onclick="cancel_upload()" />--%>
        <table>
            <tr>
                <td colspan="2" align="left"><textarea id="txtArea" cols="50" rows="10"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="left"><asp:RadioButtonList ID="rblNCO" runat='server' CssClass="rblNCO" RepeatDirection="Horizontal">
                    <asp:ListItem Value="0" Text="Case owner can now resolve this case"></asp:ListItem>
                    <asp:ListItem Value="1" Text="This is a comment/question"></asp:ListItem>
                </asp:RadioButtonList></td>
    </tr>
            <tr>
                <td align="left"><CuteWebUI:UploadAttachments runat="server" ID="Uploader1" ManualStartUpload="true" MaxFilesLimit="3" MaxFilesLimitMsg="You can only upload 3 files at a time" ValidateOption-AllowedFileExtensions="pdf, tif" InsertText="Attach Files" InsertButtonStyle-CssClass="float:left;" OnFileUploaded="Uploader_FileUploaded">                               
             </CuteWebUI:UploadAttachments></td>
             <td valign="top">            
                <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"
                    Text="Submit" OnClick="SubmitButton_Click" />
                <asp:Button ID="btnCancelNCODiv" runat="server" text="Cancel" CssClass="FloatRight" />
             </td>
            </tr>        
        </table>    
            
        </div>
        </form>
    </body>
    </html>
    <script type="text/javascript">
        function submitbutton_click() {
            var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
            var uploadobj = document.getElementById('<%=Uploader1.ClientID %>');
            if (!window.filesuploaded) {
                if (uploadobj.getqueuecount() > 0) {
                    alert("starting upload");
                    uploadobj.startupload();
                    alert("done upload");
                }
                else {
                    var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;
                    if (uploadedcount > 0) {
                        return true;
                    }
                    alert("Please browse files for upload");
                }
                return false;
            }
            window.filesuploaded = false;
            return true;
        }
        function CuteWebUI_AjaxUploader_OnPostback() {
            window.filesuploaded = true;
            var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
            var tmp = '<%=SubmitButton.ClientID %>';
            alert('id = ' + tmp);
            submitbutton.click();
            return false;
        }
    //    function CuteWebUI_AjaxUploader_OnSelect(files) {
    //        alert("CuteWebUI_AjaxUploader_OnSelect");
    //    }
                </script> 
  •  06-17-2011, 1:05 AM 68010 in reply to 67997

    Re: Ajax Uploader - Uploader_FileUploaded server event not firing

    Hi mchamo,
     
    Can you create a simple example which can reproduce this issue and send it to Kenneth@CuteSoft.net (with all require fils) ? I will check it and get back to you as soon as possible.
     
    Regards,
     
    Ken
  •  06-17-2011, 10:18 AM 68027 in reply to 68010

    Re: Ajax Uploader - Uploader_FileUploaded server event not firing

    Ken, I have identified the exact cause of the File_Uploaded event not firing.  I am using the Jquery BlockUI plugin and within it, is where I have the ajax uploader.  Using the Jquery BlockUI plugin is causing the event not to fire.
     
     
    Here is a sample of my code to using it, note dvitoDisplay is a div that contains the Ajax uploader.  The Jquery BlockUI plugin can be found here: http://jquery.malsup.com/block/
     
     
     
            $.blockUI({ message: $("#" + divToDisplay),                      
                css: {
                    left: position.left,
                    top: position.top + height,
                    backgroundcolor: '#ffffff',
                    border: '1px solid #000000',
                    position: "absolute",
                    width: "500px",
                    cursor: "auto"                 
                },
                overlayCSS: {
                    backgroundColor: '#ffffff',
                    cursor: "auto" 
                    }
            }); 
     
     
    If I don't use the plugin mentioned then the ajax uploader works fine.  The reason I am using the Jquery BlockUI plugin is because I want to block access to the rest of the page while the div containing the ajax uploader is displayed.  Are you familiar with why the ajax uploader control would not work appropriately with this plugin and specifically the File_Uploaded event does not get fired.  Everything else works fine, i.e., you can browse for files, select files, and everything looks good.  However, when you click submit to upload the file(s) you selected the File_Uploaded does not fire.
     
     If you setup any small example where you use an Ajax Uploader control within a div that is displayed by the Jquery BlockUI plugin you will easily be able to reproduce this issue.
     
    Thanks. 
  •  06-20-2011, 7:54 AM 68047 in reply to 68027

    Re: Ajax Uploader - Uploader_FileUploaded server event not firing

    Any luck on getting the Ajax Uploader control to work with the BlockUI plugin that I mentioned?
     
    Thanks. 
     
    mchamo:
    Ken, I have identified the exact cause of the File_Uploaded event not firing.  I am using the Jquery BlockUI plugin and within it, is where I have the ajax uploader.  Using the Jquery BlockUI plugin is causing the event not to fire.
     
     
    Here is a sample of my code to using it, note dvitoDisplay is a div that contains the Ajax uploader.  The Jquery BlockUI plugin can be found here: http://jquery.malsup.com/block/
     
     
     
            $.blockUI({ message: $("#" + divToDisplay),                      
                css: {
                    left: position.left,
                    top: position.top + height,
                    backgroundcolor: '#ffffff',
                    border: '1px solid #000000',
                    position: "absolute",
                    width: "500px",
                    cursor: "auto"                 
                },
                overlayCSS: {
                    backgroundColor: '#ffffff',
                    cursor: "auto" 
                    }
            }); 
     
     
    If I don't use the plugin mentioned then the ajax uploader works fine.  The reason I am using the Jquery BlockUI plugin is because I want to block access to the rest of the page while the div containing the ajax uploader is displayed.  Are you familiar with why the ajax uploader control would not work appropriately with this plugin and specifically the File_Uploaded event does not get fired.  Everything else works fine, i.e., you can browse for files, select files, and everything looks good.  However, when you click submit to upload the file(s) you selected the File_Uploaded does not fire.
     
     If you setup any small example where you use an Ajax Uploader control within a div that is displayed by the Jquery BlockUI plugin you will easily be able to reproduce this issue.
     
    Thanks. 
  •  06-20-2011, 12:28 PM 68049 in reply to 68047

    Re: Ajax Uploader - Uploader_FileUploaded server event not firing

    Btw, the same exact issue occurs you use a JQuery modal dialog plugin as well.  So if the ajax uploader is within a a Jquery modal dialog, the File_Uploaded function does not fire.  Thanks.
     
     
    mchamo:
    Any luck on getting the Ajax Uploader control to work with the BlockUI plugin that I mentioned?
     
    Thanks. 
     
    mchamo:
    Ken, I have identified the exact cause of the File_Uploaded event not firing.  I am using the Jquery BlockUI plugin and within it, is where I have the ajax uploader.  Using the Jquery BlockUI plugin is causing the event not to fire.
     
     
    Here is a sample of my code to using it, note dvitoDisplay is a div that contains the Ajax uploader.  The Jquery BlockUI plugin can be found here: http://jquery.malsup.com/block/
     
     
     
            $.blockUI({ message: $("#" + divToDisplay),                      
                css: {
                    left: position.left,
                    top: position.top + height,
                    backgroundcolor: '#ffffff',
                    border: '1px solid #000000',
                    position: "absolute",
                    width: "500px",
                    cursor: "auto"                 
                },
                overlayCSS: {
                    backgroundColor: '#ffffff',
                    cursor: "auto" 
                    }
            }); 
     
     
    If I don't use the plugin mentioned then the ajax uploader works fine.  The reason I am using the Jquery BlockUI plugin is because I want to block access to the rest of the page while the div containing the ajax uploader is displayed.  Are you familiar with why the ajax uploader control would not work appropriately with this plugin and specifically the File_Uploaded event does not get fired.  Everything else works fine, i.e., you can browse for files, select files, and everything looks good.  However, when you click submit to upload the file(s) you selected the File_Uploaded does not fire.
     
     If you setup any small example where you use an Ajax Uploader control within a div that is displayed by the Jquery BlockUI plugin you will easily be able to reproduce this issue.
     
    Thanks. 
  •  06-21-2011, 1:25 AM 68062 in reply to 68049

    Re: Ajax Uploader - Uploader_FileUploaded server event not firing

    Hi mchamo,
     
    The example below shows you how to use AjaxUploader with Jquery modal dialog.
     
    About the  blockUI control issue. I still can not reproduce it. Can you show me the whole example which can reproduce this issue? So I can check it for you.
     
    <%@ Page Language="vb" %>

    <%@ Register Assembly="CuteWebUI.AjaxUploader" Namespace="CuteWebUI" TagPrefix="cc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>

        <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"
            type="text/javascript"></script>

        <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"
            type="text/javascript"></script>

        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

        <script language="javascript" type="text/javascript">

            function CuteWebUI_AjaxUploader_OnInitialize() {

                $(function () {

                    $("#dialog").dialog({

                        height: 450,

                        width: 850,

                        modal: true,

                        autoOpen: true

                    });

                });

            }
               function CuteWebUI_AjaxUploader_OnMantleButton(btn,div)
            {
                div.style.zIndex=999999;
            }

        </script>

    </head>
    <body>
        <form id="form1" runat="server">
        <%--div1 for firefox, can not be deleted--%>
            <div style="visibility: hidden" id="div1">
                nothing
            </div>
            <div>
                <div id="dialog" title="Dialog">
                    <div>
                    </div>
                    <div style="width: 500px;">
                        <div id="divAddFiles">
                            <asp:Button runat="server" ID="btnAddFiles" Text="Select files" />
                        </div>
                        <div id="divCancelUpload" style="margin-top: 4px;">
                            <asp:Button runat="server" ID="btnCancelUpload" Text="Cancel" />
                        </div>
                    </div>
                </div>
                <cc1:Uploader runat='server' ID='uploader1' InsertButtonID='btnAddFiles' />
            </div>
        </form>
    </body>
    </html>
     
    Regards,
     
    ken
View as RSS news feed in XML