Support forums » Products » Ajax Uploader » How to hide File Icons on pre-upload view when ManualStartUpload="true"

How to hide File Icons on pre-upload view when ManualStartUpload="true"

Last post 06-22-2012, 6:44 AM by BenHolcombe. 2 replies.
Sort Posts: Previous Next

  •  06-18-2012, 7:42 AM 73926

    How to hide File Icons on pre-upload view when ManualStartUpload="true"

    Reply Quote
    Given the following snippet of code:
     
    <CuteWebUI:UploadAttachments
     runat="server"
     ID="Uploader1"
     MultipleFilesUpload="true"
     ManualStartUpload="true"
     InsertButtonID="BrowseButton"
     ShowCheckBoxes="False"
     ShowFileIcons="False" >
     
    The File Icons are hidden in the view post-upload view but not in the pre-upload view. 
     
    How do I hide the File Icons in the pre-upload view? 
     

  •  06-19-2012, 11:50 AM 73936 in reply to 73926

    Re: How to hide File Icons on pre-upload view when ManualStartUpload="true"

    Reply Quote
    Hi BenHolcombe,
     
    You can write your own queue table to achieve this requirement.
     
    The example below shows you how to achieve it
     
    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 style="font-size: larger; padding-left: 100px; margin: 4px;">  
    21.                 <%-- you can customize cancel all button here--%>  
    22.                 <a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>  
    23.             </div>  
    24.         </div>  
    25.     </form>  
    26. </body>  
    27.   
    28. <script>  
    29. var uploader=document.getElementById("<%=UploadAttachments1.ClientID %>");  
    30. uploader.handlequeueui=myqueueuihandler;  
    31. function myqueueuihandler(list)  
    32. {  
    33.     if(list.length<2)  
    34.     {  
    35.         document.getElementById("queuediv").style.display="none";  
    36.     }  
    37.     else  
    38.     {  
    39.         document.getElementById("queuediv").style.display="";  
    40.         var container=document.getElementById("queuedivtablecontainer");  
    41.         container.innerHTML="";  
    42.           
    43.         var table=document.createElement("table");  
    44.         table.style.borderCollapse="collapse";  
    45.         table.cellSpacing=0;  
    46.         table.cellPadding=4;  
    47.         table.border=1;  
    48.         table.borderColor="darkgreen";  
    49.   
    50.         for(var i=0;i<list.length;i++)  
    51.         {  
    52.              
    53.             var imgFinish=document.createElement("IMG");  
    54.             var imgError=document.createElement("IMG");  
    55.             var imgUpload=document.createElement("IMG");  
    56.             var imgQueue=document.createElement("IMG");  
    57.             
    58.             imgFinish.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploadok.png&_ver=634009764514705972";  
    59.             imgError.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploaderror.png&_ver=634009764514705972";  
    60.             imgUpload.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploading.gif&_ver=634009764514705972";  
    61.             imgQueue.src="CuteWebUI_Uploader_Resource.axd?type=file&file=stop.png&_ver=634009764514705972";  
    62.             var name=list[i].FileName  
    63.             var size=list[i].FileSize // (or -1)  
    64.             var stat=list[i].Status // Finish|Error|Upload|Queue  
    65.             var func=list[i].Cancel;  
    66.               
    67.             var row=table.insertRow(-1);  
    68.       
    69.             row.insertCell(-1).innerHTML=name;  
    70.               
    71.             var last=row.insertCell(-1);  
    72.             if(stat=="Queue")  
    73.             {  
    74.             imgQueue.onclick=func;  
    75.                 last.appendChild(imgQueue);  
    76.             }  
    77.             else if(stat=="Finish")  
    78.             {  
    79.                 last.appendChild(imgFinish);  
    80.             }  
    81.             else if(stat=="Error")  
    82.             {  
    83.                 last.appendChild(imgError);  
    84.             }  
    85.             else if(stat=="Upload")  
    86.             {  
    87.                 last.appendChild(imgUpload);  
    88.             }  
    89.   
    90.         }  
    91.           
    92.         container.appendChild(table);  
    93.     }  
    94.     return false; //hide the default;  
    95. }  
    96. function cancelalltasks()  
    97. {  
    98.     uploader.cancelall();  
    99. }  
    100. </script>  
    101.   
    102.   
    103. </html>  
    Regards,
     
    Ken 

  •  06-22-2012, 6:44 AM 73970 in reply to 73936

    Re: How to hide File Icons on pre-upload view when ManualStartUpload="true"

    Reply Quote
    Thanks Ken that set me on the right path. 
View as RSS news feed in XML