Re: Custom Cancel All uploads

  •  01-10-2012, 7:13 AM

    Re: Custom Cancel All uploads

    Hi Pbanerji,
     
    The cancel all button is a part of the queue table, if you want to use a custom button to replace it, you need to write your own queue table.
     
    The example below shows you how to achieve it
     
    <%@ 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" ManualStartUpload="true">
                </CuteWebUI:UploadAttachments>
                <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"
                    Text="Submit" />
            </div>
            <br />
            <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 
View Complete Thread