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