Re: Customizing Queue Table

  •  05-03-2011, 10:04 AM

    Re: Customizing Queue Table

    Dear chrisluo,
     
    You can create your own queue table, please refer to the following snippet:

    <%@ 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">
    <script runat="server">  
       
        void InsertMsg(string msg)
        {
            ListBoxEvents.Items.Insert(0, msg);
            ListBoxEvents.SelectedIndex = 0;
        }
        void SubmitButton_Click(object sender, EventArgs e)
        {
            InsertMsg("You clicked the Submit Button.");     
        }
        int uploadcount = 0;
        void Uploader_FileUploaded(object sender, UploaderEventArgs args)
        {
            uploadcount++;
            Uploader uploader = (Uploader)sender;
            InsertMsg("File uploaded! " + args.FileName + ", " + args.FileSize + " bytes.");

            //Copys the uploaded file to a new location.
            //args.CopyTo(path);
            //You can also open the uploaded file's data stream.
            //System.IO.Stream data = args.OpenStream();
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    </head>
    <body>
     <form id="Form1" runat="server">
      <div>
       <asp:LinkButton runat="server" ID="BrowseButton" Text="Select Files To Upload" />
      </div>
      <div id="queuediv" style="display: none;">
       <div id="queuedivtablecontainer">
       </div>
       <div style="font-size:larger;padding-left:100px;margin:4px;">
        <a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>
       </div>
      </div>
      <div>
       <CuteWebUI:UploadAttachments runat="server"  ManualStartUpload=true ID="UploadAttachments1" InsertButtonID="BrowseButton">
       </CuteWebUI:UploadAttachments>
        <br />
                <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"
                    Text="Submit" OnClick="SubmitButton_Click" />
                <br />

                  <div>
                    <asp:ListBox runat="server" ID="ListBoxEvents" Width="400"></asp:ListBox>
                </div>
      </div>
     </form>
    </body>
    <script type="text/javascript">
        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 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).innerHTML = name;

                    var last = row.insertCell(-1);
                    if (stat == "Queue") {
                        var btn = document.createElement("A");
                        btn.href = "BLOCKED SCRIPTvoid(0)";
                        btn.onclick = func;
                        btn.innerHTML = "Cancel";
                        last.appendChild(btn);
                    }
                    else {
                        last.innerHTML = stat;
                    }
                }

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

        function submitbutton_click() {
            var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
            var uploadobj = document.getElementById('<%=UploadAttachments1.ClientID %>');
            if (!window.filesuploaded) {
                if (uploadobj.getqueuecount() > 0) {
                    uploadobj.startupload();
                }
                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 %>');
            submitbutton.click();
            return false;
        }
    </script>
    </html>

    Thank you for asking
View Complete Thread