Support forums - Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Support forums » Products » Ajax Uploader » Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Last post 12-30-2008, 9:25 AM by cassini. 6 replies.


	Sort Posts: Previous Next

12-10-2008, 5:14 AM 46733

cassini
Joined on 11-27-2008
Posts 24

Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Reply Quote

Hi, "Start Uploading Manually" demo is it possible to show files sizes and files icons beside files name in the files table?

Regards.

12-13-2008, 9:51 AM 46891 in reply to 46733

cutechat
Joined on 07-22-2004
Posts 2,332

Re: Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Reply Quote

Hi,

You can draw your own table like this :

(read the code , and the merge it to the 'manually example')

<%@ 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 runat="server">
</head>
<body>
<form 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" ID="UploadAttachments1" InsertButtonID="BrowseButton">
   </CuteWebUI:UploadAttachments>
  </div>
</form>
</body>

  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();
}
</script>

</html>

Regards,

Terry

12-14-2008, 6:55 AM 46909 in reply to 46891

cassini
Joined on 11-27-2008
Posts 24

Re: Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Reply Quote

Hi, I build a separate page from the example that you put but it does not work, are you sure that it works for you?

12-18-2008, 9:36 AM 47088 in reply to 46909

cutechat
Joined on 07-22-2004
Posts 2,332

Re: Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Reply Quote

Hi,

Yes. It works for me.

That is just an example to show how to replace the default uploading-queue table.

You can select more files to test it.

Regards,

Terry

12-29-2008, 9:39 AM 47261 in reply to 47088

cassini
Joined on 11-27-2008
Posts 24

Re: Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Reply Quote

The following is my code the table appears successfully but whenever I click on submit button to upload I got a popup message says:"Please browse files to upload", Why did I miss:

<div>

<asp:LinkButton runat="server" ID="BrowseButton" Text="Select Files To Upload" />

</div>

</div>

<a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>

</div>

<div>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" ManualStartUpload="true" InsertButtonID="BrowseButton">

</CuteWebUI:UploadAttachments>

<br />

<asp:Button runat="server" ID="Button1" OnClientClick="return submitbutton_click2()" Text="Upload" OnClick="SubmitButton_Click" />

<br />

function submitbutton_click2()

{

var submitbutton=document.getElementById('<%=Button1.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('<%=Button1.ClientID %>');

submitbutton.click();

return false;

}

</script>

</ContentTemplate>

</asp:UpdatePanel>

</div>

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 totalsize=0;

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 / 1024 ) / 1024 // (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;

row.insertCell(1).innerHTML=size + ' MB';

totalsize += size;

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;

}

var row=table.insertRow(-1);

row.insertCell(-1).innerHTML='<font color=green>Total: ' + list.length + ' files</font>';

row.insertCell(1).innerHTML= '<font color=green>' + totalsize + ' MB</font>';

container.appendChild(table);

}

return false; //hide the default;

}

function cancelalltasks()

{

uploader.cancelall();

}

</script>

12-30-2008, 6:16 AM 47272 in reply to 47261

cutechat
Joined on 07-22-2004
Posts 2,332

Re: Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Reply Quote

Hi,

your code missed the element id 'queuediv' and 'queuedivtablecontainer'

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

Regards,

Terry

12-30-2008, 9:25 AM 47282 in reply to 47272

cassini
Joined on 11-27-2008
Posts 24

Re: Is it possible to show files sizes and files icons beside files name in "Start uploading manually" example?

Reply Quote

Yeah you are right...Thank you.