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

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

Last post 03-15-2013, 12:56 PM by Kenneth. 1 replies.
Sort Posts: Previous Next

  •  03-14-2013, 1:58 PM 77043

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

    Reply Quote

    Hi,

    A)While uploading multiple files, the progress bar comes with two Cancel Buttons:

    1) Cancel All :- To cancel all uploads

    2) Cancel:- To cancel the ongoing file upload.

     

    Requirement here is to hide the 2nd Cancel button and rename the 'Cancel All' button to 'Cancel' so that when the cancel button is clicked all the file upload should ge t cancelled.

     

    B) While uploding only one file, 'Cancel Upload' button comes. So, when we click on this button the file upload gets cancelled but the file name is shown on the browser with an image with tool tip as 'Cancelled'. Requirement here is that there should be no grid with cancelled files.

     

    Any way to achieve these 2 requirements? 

     

  •  03-15-2013, 12:56 PM 77050 in reply to 77043

    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 as RSS news feed in XML