Support forums » Products » Ajax Uploader » Re: CSS style and Cancel All Uploads button

Re: CSS style and Cancel All Uploads button

  •  01-04-2013, 8:35 AM

    Re: CSS style and Cancel All Uploads button

    Reply Quote

    Hi,

     

    If you just need to hide the cancel all button, please add the style code below into your page.

     

    1. <style>  
    2. .AjaxUploaderCancelAllButton {  
    3.  display: none !important;  
    4. }  
    5. </style>  
     

    If you need to custom the whole queue table style, then you can need generate your own queue table, like the example below.

     

    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" ManualStartUpload="true">  
    12.             </CuteWebUI:UploadAttachments>  
    13.             <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"  
    14.                 Text="Submit" />  
    15.         </div>  
    16.         <br />  
    17.         <div id="queuediv" style="display: none;">  
    18.             <div id="queuedivtablecontainer">  
    19.             </div>  
    20.         </div>  
    21.     </form>  
    22. </body>  
    23.   
    24. <script>  
    25.     var uploader = document.getElementById("<%=UploadAttachments1.ClientID %>");  
    26.     uploader.handlequeueui = myqueueuihandler;  
    27.     function myqueueuihandler(list) {  
    28.         if (list.length < 2) {  
    29.             document.getElementById("queuediv").style.display = "none";  
    30.         }  
    31.         else {  
    32.             document.getElementById("queuediv").style.display = "";  
    33.             var container = document.getElementById("queuedivtablecontainer");  
    34.             container.innerHTML = "";  
    35.   
    36.             var table = document.createElement("table");  
    37.             table.style.borderCollapse = "collapse";  
    38.             table.cellSpacing = 0;  
    39.             table.cellPadding = 4;  
    40.             table.border = 1;  
    41.             table.borderColor = "darkgreen";  
    42.   
    43.             for (var i = 0; i < list.length; i++) {  
    44.                 var img = document.createElement("IMG");  
    45.                 var imgFinish = document.createElement("IMG");  
    46.                 var imgError = document.createElement("IMG");  
    47.                 var imgUpload = document.createElement("IMG");  
    48.                 var imgQueue = document.createElement("IMG");  
    49.                 img.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=circle.png&_ver=634009764514705972";  
    50.                 imgFinish.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=uploadok.png&_ver=634009764514705972";  
    51.                 imgError.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=uploaderror.png&_ver=634009764514705972";  
    52.                 imgUpload.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=uploading.gif&_ver=634009764514705972";  
    53.                 imgQueue.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=stop.png&_ver=634009764514705972";  
    54.                 var name = list[i].FileName  
    55.                 var size = list[i].FileSize // (or -1)  
    56.                 var stat = list[i].Status   // Finish|Error|Upload|Queue  
    57.                 var func = list[i].Cancel;  
    58.   
    59.                 var row = table.insertRow(-1);  
    60.                 row.insertCell(-1).appendChild(img);  
    61.                 row.insertCell(-1).innerHTML = name;  
    62.   
    63.                 var last = row.insertCell(-1);  
    64.                 if (stat == "Queue") {  
    65.                     imgQueue.onclick = func;  
    66.                     last.appendChild(imgQueue);  
    67.                 }  
    68.                 else if (stat == "Finish") {  
    69.                     last.appendChild(imgFinish);  
    70.                 }  
    71.                 else if (stat == "Error") {  
    72.                     last.appendChild(imgError);  
    73.                 }  
    74.                 else if (stat == "Upload") {  
    75.                     last.appendChild(imgUpload);  
    76.                 }  
    77.   
    78.             }  
    79.   
    80.             container.appendChild(table);  
    81.         }  
    82.         return false; //hide the default;  
    83.     }  
    84.   
    85. </script>  
    86.   
    87.   
    88. </html>  
     

    Regards,

     

    Ken 
View Complete Thread