Support forums » Products » Ajax Uploader » Re: How to customize the UI

How to customize the UI

Last post 12-31-2010, 9:15 PM by Kenneth. 1 replies.
Sort Posts: Previous Next

  •  12-28-2010, 11:30 PM 65548

    How to customize the UI

    Reply Quote
    I've tried looking in the documentation, but it wasn't clear to me at all.
     
    I'm trying to adjust the interface part where the file  is uploaded and displays the name. It looks like it gets rendered in a white table. There is a file attachment icon and a green checkbox.
     
    I've tried editing every background color field I could find in the properties and nothing is changing. 
     
    Here's my code block:
     
    1. <uploadattachments id="Attachments2" runat="server" insertbuttonid="ibAttachFiles"  
    2.     inserttext="Select files" multiplefilesupload="true" onattachmentadded="Attachments2_AttachmentAdded"  
    3.     onattachmentremoveclicked="Attachments2_AttachmentRemoveClicked" onuploadcompleted="Attachments2_UploadCompleted">   
    4.         <CuteWebUI:UploadAttachments ID="Attachments3" runat="server"    
    5.             InsertButtonID="ibAttachFiles" InsertText="Select files"    
    6.             MultipleFilesUpload="true" OnAttachmentAdded="Attachments2_AttachmentAdded"    
    7.             onattachmentremoveclicked="Attachments2_AttachmentRemoveClicked" ProgressPanelWidth="285" ProgressBarBorderStyle="border:1px solid #444444;" AttachmentTRStyle="background-color:#cc3300;" ItemCellStyle-BackColor="#CC0000">   
    8.         </CuteWebUI:UploadAttachments>   
    9.         </uploadattachments>   
    10. <asp:ListBox ID="lbxFiles" runat="server" CssClass="SendPanelAttachBox"    
    11.     Visible="False" Width="265px" BackColor="#CC0000" ForeColor="#990000">   
    12. </asp:ListBox>  
     
    I've looked in the <UPLOADATTACHMENTS> tag in the properties panel and if the property is there I need to edit, it's not clear to me.
     
    I'm also new to .net so I may just need some newb assistance.
     
    Thanks :)
     
    John

  •  12-31-2010, 9:15 PM 65568 in reply to 65548

    Re: How to customize the UI

    Reply Quote
    Hi jbruso,
     
    Please override the queue table to achieve it. The example below shows you how to custom the queue table
     
    1. <%@ Page Language="C#" Title="Customize the queue UI" %>  
    2.   
    3. <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7. </head>  
    8. <body>  
    9.     <form id="Form1" runat="server">  
    10.         <div>  
    11.             <CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1">  
    12.             </CuteWebUI:UploadAttachments>  
    13.         </div>  
    14.         <div id="queuediv" style="display: none;">  
    15.             <div id="queuedivtablecontainer">  
    16.             </div>  
    17.             <div style="font-size: larger; padding-left: 100px; margin: 4px;">  
    18.                 <%-- you can customize cancel all button here--%>  
    19.                 <a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>  
    20.             </div>  
    21.         </div>  
    22.     </form>  
    23. </body>  
    24.   
    25. <script>  
    26. var uploader=document.getElementById("<%=UploadAttachments1.ClientID %>");  
    27. uploader.handlequeueui=myqueueuihandler;  
    28. function myqueueuihandler(list)  
    29. {  
    30.     if(list.length<2)  
    31.     {  
    32.         document.getElementById("queuediv").style.display="none";  
    33.     }  
    34.     else  
    35.     {  
    36.         document.getElementById("queuediv").style.display="";  
    37.         var container=document.getElementById("queuedivtablecontainer");  
    38.         container.innerHTML="";  
    39.           
    40.         var table=document.createElement("table");  
    41.         table.style.borderCollapse="collapse";  
    42.         table.cellSpacing=0;  
    43.         table.cellPadding=4;  
    44.         table.border=1;  
    45.         table.borderColor="darkgreen";  
    46.   
    47.         for(var i=0;i<list.length;i++)  
    48.         {  
    49.             var img=document.createElement("IMG");  
    50.             var imgFinish=document.createElement("IMG");  
    51.             var imgError=document.createElement("IMG");  
    52.             var imgUpload=document.createElement("IMG");  
    53.             var imgQueue=document.createElement("IMG");  
    54.             img.src="CuteWebUI_Uploader_Resource.axd?type=file&file=circle.png&_ver=634009764514705972";  
    55.             imgFinish.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploadok.png&_ver=634009764514705972";  
    56.             imgError.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploaderror.png&_ver=634009764514705972";  
    57.             imgUpload.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploading.gif&_ver=634009764514705972";  
    58.             imgQueue.src="CuteWebUI_Uploader_Resource.axd?type=file&file=stop.png&_ver=634009764514705972";  
    59.             var name=list[i].FileName  
    60.             var size=list[i].FileSize // (or -1)  
    61.             var stat=list[i].Status // Finish|Error|Upload|Queue  
    62.             var func=list[i].Cancel;  
    63.               
    64.             var row=table.insertRow(-1);  
    65.             row.insertCell(-1).appendChild(img);  
    66.             row.insertCell(-1).innerHTML=name;  
    67.             row.style.backgroundColor="red";  
    68.             var last=row.insertCell(-1);  
    69.             if(stat=="Queue")  
    70.             {  
    71.             imgQueue.onclick=func;  
    72.                 last.appendChild(imgQueue);  
    73.             }  
    74.             else if(stat=="Finish")  
    75.             {  
    76.                 last.appendChild(imgFinish);  
    77.             }  
    78.             else if(stat=="Error")  
    79.             {  
    80.                 last.appendChild(imgError);  
    81.             }  
    82.             else if(stat=="Upload")  
    83.             {  
    84.                 last.appendChild(imgUpload);  
    85.             }  
    86.   
    87.         }  
    88.           
    89.         container.appendChild(table);  
    90.     }  
    91.     return false; //hide the default;  
    92. }  
    93. function cancelalltasks()  
    94. {  
    95.     uploader.cancelall();  
    96. }  
    97. </script>  
    98.   
    99. </html> 
     
    Regards,
     
    ken
View as RSS news feed in XML