CuteWebUI_AjaxUploader_OnQueueUI event

Last post 11-04-2011, 9:12 AM by Kemal. 2 replies.
Sort Posts: Previous Next
  •  11-04-2011, 5:59 AM 71029

    CuteWebUI_AjaxUploader_OnQueueUI event

    Hi,
     
     I have a problem with the event CuteWebUI_AjaxUploader_OnQueueUI.
     
    1. This event is activated even on load, when the form that contains the control is loaded for the first time, without click on the button uploadmedia, is this right?
     
    2. I tried using this event to wrap this table in a div (AjaxUploaderQueueTable) but it seems that this table isn't available at this moment. How could I do this? (I want to make a scrollbar around this table)
     
    Thank you 
  •  11-04-2011, 7:47 AM 71034 in reply to 71029

    Re: CuteWebUI_AjaxUploader_OnQueueUI event

    Hi Kemal,
     
    1. This event is activated even on load, when the form that contains the control is loaded for the first time, without click on the button uploadmedia, is this right?
     
    No, this event will fire after you select the files, and the upload in progressing.
     
    2. I tried using this event to wrap this table in a div (AjaxUploaderQueueTable) but it seems that this table isn't available at this moment. How could I do this? (I want to make a scrollbar around this table)
     
    The example below shows you how to override the queue table.
     
    <%@ Page Language="C#" Title="Customize the queue UI" %>

    <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    </head>
    <body>
        <form id="Form1" runat="server">
            <div>
                <CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1">
                </CuteWebUI:UploadAttachments>
            </div>
            <div id="queuediv" style="display: none;">
                <div id="queuedivtablecontainer">
                </div>
                <div style="font-size: larger; padding-left: 100px; margin: 4px;">
                    <%--    you can customize cancel all button here--%>
                    <a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>
                </div>
            </div>
        </form>
    </body>

    <script>
    var uploader=document.getElementById("<%=UploadAttachments1.ClientID %>");
    uploader.handlequeueui=myqueueuihandler;
    function myqueueuihandler(list)
    {
        if(list.length<2)
        {
            document.getElementById("queuediv").style.display="none";
        }
        else
        {
            document.getElementById("queuediv").style.display="";
            var container=document.getElementById("queuedivtablecontainer");
            container.innerHTML="";
            
            var table=document.createElement("table");
            table.style.borderCollapse="collapse";
            table.cellSpacing=0;
            table.cellPadding=4;
            table.border=1;
            table.borderColor="darkgreen";

            for(var i=0;i<list.length;i++)
            {
                var img=document.createElement("IMG");
                var imgFinish=document.createElement("IMG");
                var imgError=document.createElement("IMG");
                var imgUpload=document.createElement("IMG");
                var imgQueue=document.createElement("IMG");
                img.src="CuteWebUI_Uploader_Resource.axd?type=file&file=circle.png&_ver=634009764514705972";
                imgFinish.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploadok.png&_ver=634009764514705972";
                imgError.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploaderror.png&_ver=634009764514705972";
                imgUpload.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploading.gif&_ver=634009764514705972";
                imgQueue.src="CuteWebUI_Uploader_Resource.axd?type=file&file=stop.png&_ver=634009764514705972";
                var name=list[i].FileName
                var size=list[i].FileSize // (or -1)
                var stat=list[i].Status    // Finish|Error|Upload|Queue
                var func=list[i].Cancel;
                
                var row=table.insertRow(-1);
                row.insertCell(-1).appendChild(img);
                row.insertCell(-1).innerHTML=name;
                
                var last=row.insertCell(-1);
                if(stat=="Queue")
                {
                imgQueue.onclick=func;
                    last.appendChild(imgQueue);
                }
                else if(stat=="Finish")
                {
                    last.appendChild(imgFinish);
                }
                else if(stat=="Error")
                {
                    last.appendChild(imgError);
                }
                else if(stat=="Upload")
                {
                    last.appendChild(imgUpload);
                }

            }
            
            container.appendChild(table);
        }
        return false; //hide the default;
    }
    function cancelalltasks()
    {
        uploader.cancelall();
    }
    </script>

    </html>
     
    Regards,
     
    Ken
  •  11-04-2011, 9:12 AM 71035 in reply to 71034

    Re: CuteWebUI_AjaxUploader_OnQueueUI event

    Hi Kenneth,
     
    I'm creating an MVC 3 web application so maybe there is a difference in firing events. I tried following:
     
     function CuteWebUI_AjaxUploader_OnQueueUI(list) {
     if ($("#uploaderTable").length <= 0) {
                        $('.AjaxUploaderQueueTable').wrap(function () {
                            return '<div id="uploaderTable" style="overflow:auto; height:170px; width:250px;" />';
                        });
                    }
        }
     
    When I write an simple alert('something') inside this event, I see it firing on load too (it fires also after selecting files).
     
View as RSS news feed in XML