Support forums » Products » Ajax Uploader » Re: Hide the Cancel button that comes while uploading and rename 'CancelAll' button to 'Cancel'

Re: Hide the Cancel button that comes while uploading and rename 'CancelAll' button to 'Cancel'

  •  03-15-2013, 12:56 PM

    Re: Hide the Cancel button that comes while uploading and rename 'CancelAll' button to 'Cancel'

    Reply Quote

    Hi MayurNarsale,

     

    To achieve these requirements, you need to wirte your own queue table. The example below shows you how to achieve it.

     

    For requirement 1, I used property "CancelButtonID" to define my own cancel button, so I can hide/show it in "CuteWebUI_AjaxUploader_OnSelect(files) " depends on the files number. 

     

    For requirement 2, I write my own queue table. And hide the error/canceld record by

     

          else if(stat=="Error")
                      {
                        last.appendChild(imgError);
                        //hide the canceld record
                        row.style.visibility="hidden";
                      }
     

     

    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7.     <title>example</title>  
    8. </head>  
    9. <body>  
    10.     <form id="form1" runat="server">  
    11.         <CuteWebUI:UploadAttachments ID="uploader1" runat="server" CancelButtonID="btnCancel">  
    12.         </CuteWebUI:UploadAttachments>  
    13.         <asp:Button ID="btnCancel" runat="server" Text="Cancel" />  
    14.         <div id="queuediv" style="display: none;">  
    15.             <div id="queuedivtablecontainer">  
    16.             </div>  
    17.             <div>  
    18.                 <%-- you can customize cancel all button here--%>  
    19.                 <input type="button" value="Cancel" onclick="cancelalltasks();return false;" />  
    20.             </div>  
    21.         </div>  
    22.     </form>  
    23. </body>  
    24. </html>  
    25.   
    26. <script>  
    27. function CuteWebUI_AjaxUploader_OnSelect(files)  
    28. {    
    29.     var btnCancel=document.getElementById("<%= btnCancel.ClientID %>");  
    30.    if(files.length>1)  
    31.    {  
    32.      //hide the cancel button if upload multiple files  
    33.      btnCancel.style.visibility="hidden";  
    34.    }  
    35.    else  
    36.    {  
    37.     //show the cancel button if only upload 1 file  
    38.      btnCancel.style.visibility="visible";  
    39.    }  
    40. }  
    41. var uploader=document.getElementById("<%=uploader1.ClientID %>");  
    42. uploader.handlequeueui=myqueueuihandler;  
    43. function myqueueuihandler(list)  
    44. {  
    45.     if(list.length<2)  
    46.     {  
    47.         document.getElementById("queuediv").style.display="none";  
    48.     }  
    49.     else  
    50.     {  
    51.         document.getElementById("queuediv").style.display="";  
    52.         var container=document.getElementById("queuedivtablecontainer");  
    53.         container.innerHTML="";  
    54.           
    55.         var table=document.createElement("table");  
    56.         table.style.borderCollapse="collapse";  
    57.         table.cellSpacing=0;  
    58.         table.cellPadding=4;  
    59.         table.border=1;  
    60.         table.borderColor="darkgreen";  
    61.   
    62.         for(var i=0;i<list.length;i++)  
    63.         {  
    64.             var img=document.createElement("IMG");  
    65.             var imgFinish=document.createElement("IMG");  
    66.             var imgError=document.createElement("IMG");  
    67.             var imgUpload=document.createElement("IMG");  
    68.             var imgQueue=document.createElement("IMG");  
    69.             img.src="CuteWebUI_Uploader_Resource.axd?type=file&file=circle.png&_ver=634009764514705972";  
    70.             imgFinish.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploadok.png&_ver=634009764514705972";  
    71.             imgError.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploaderror.png&_ver=634009764514705972";  
    72.             imgUpload.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploading.gif&_ver=634009764514705972";  
    73.             imgQueue.src="CuteWebUI_Uploader_Resource.axd?type=file&file=stop.png&_ver=634009764514705972";  
    74.             var name=list[i].FileName  
    75.             var size=list[i].FileSize // (or -1)  
    76.             var stat=list[i].Status // Finish|Error|Upload|Queue  
    77.             var func=list[i].Cancel;  
    78.               
    79.             var row=table.insertRow(-1);  
    80.             row.insertCell(-1).appendChild(img);  
    81.             row.insertCell(-1).innerHTML=name;  
    82.               
    83.             var last=row.insertCell(-1);  
    84.             if(stat=="Queue")  
    85.             {  
    86.             imgQueue.onclick=func;  
    87.                 last.appendChild(imgQueue);  
    88.             }  
    89.             else if(stat=="Finish")  
    90.             {  
    91.                 last.appendChild(imgFinish);  
    92.             }  
    93.             else if(stat=="Error")  
    94.             {  
    95.                 last.appendChild(imgError);  
    96.                 //hide the canceld record  
    97.                 row.style.visibility="hidden";  
    98.             }  
    99.             else if(stat=="Upload")  
    100.             {  
    101.                 last.appendChild(imgUpload);  
    102.             }  
    103.   
    104.         }  
    105.           
    106.         container.appendChild(table);  
    107.     }  
    108.     return false; //hide the default;  
    109. }  
    110. function cancelalltasks()  
    111. {  
    112.     uploader.cancelall();  
    113. }  
    114. </script>  
     

    Regards,

     

    Ken 
View Complete Thread