<%@ 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>