Hi jbruso,
Please override the queue table to achieve it. The example below shows you how to custom 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
- var stat=list[i].Status
- var func=list[i].Cancel;
-
- var row=table.insertRow(-1);
- row.insertCell(-1).appendChild(img);
- row.insertCell(-1).innerHTML=name;
- row.style.backgroundColor="red";
- 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;
- }
- function cancelalltasks()
- {
- uploader.cancelall();
- }
- </script>
-
- </html>
Regards,
ken