Support forums » Products » Ajax Uploader » Re: Setting file queue background color

Setting file queue background color

Last post 08-10-2010, 7:38 PM by ashleighB. 6 replies.
Sort Posts: Previous Next

  •  08-04-2010, 1:30 AM 63055

    Setting file queue background color

    Reply Quote
    I'm currently assessing the AJAX File Uploader for a .NET application I'm developing, and a requirement is it must integrate into the sites design seamlessly.
     
    I've configured the uploader to manual upload, and have been able to set the background color for the list of files after the upload has completed by setting <ItemCellStyle BackColor="#CCCCCC" />. However, the list of files before and during the upload process still display on a white background, is it possible to customise the background color during those phases?

  •  08-04-2010, 3:16 PM 63088 in reply to 63055

    Re: Setting file queue background color

    Reply Quote
    Please try the following code:
    <%@ Page Language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
        void InsertMsg(string msg)
        {
            ListBoxEvents.Items.Insert(0, msg);
            ListBoxEvents.SelectedIndex = 0;
        }
        void Attachments1_AttachmentAdded(object sender, AttachmentItemEventArgs args)
        {
            InsertMsg(args.Item.FileName + " has been uploaded.");
        }

        void ButtonDeleteAll_Click(object sender, EventArgs e)
        {
            InsertMsg("Attachments1.DeleteAllAttachments();");
            Attachments1.DeleteAllAttachments();
        }
        void ButtonTellme_Click(object sender, EventArgs e)
        {
            ListBoxEvents.Items.Clear();
            foreach (AttachmentItem item in Attachments1.Items)
            {
                InsertMsg(item.FileName + ", " + item.FileSize + " bytes.");
                //Copies the uploaded file to a new location.
                //item.CopyTo("c:\\temp\\"+item.FileName);
                //You can also open the uploaded file's data stream.
                //System.IO.Stream data = item.OpenStream();
            }
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Uploading multiple files like GMail</title>
        <link rel="stylesheet" href="demo.css" type="text/css" />
        <style type="text/css"> 
     /*Pre Defined*/  
     .AjaxUploaderProgressTable{}  
     .AjaxUploaderProgressBarText{}  
     .AjaxUploaderProgressInfoText{}  
     .AjaxUploaderCancelAllButton{}  
     .AjaxUploaderQueueTable  
     {  
      background-color:Darkred!important;  
     }  
     .AjaxUploaderQueueTableRow  
     {  
      background-color:Orange!important;  
      color:Darkgreen;  
     }  
     .AjaxUploaderAttachmentsTableRow  
     {  
      background-color:Orange!important;  
     }  
     /*User Defined*/  
     .Table  
     {  
      background-color:Darkgreen!important;  
     }  
     .Cell  
     {  
      Color:Darkred;  
     }  
    </style>

    </head>
    <body>
        <form id="form1" runat="server">
            <div class="content">
               
                        <h2>
                            Uploading multiple files like GMail</h2>
                        <p>
                            Google's GMail has a nice way of allowing you to upload multiple files. Rather than
                            showing you 10 file upload boxes at once, the user attaches a file, you can click
                            a button to add another attachment.
                        </p>
                        <CuteWebUI:UploadAttachments InsertText="Upload Multiple files Now" runat="server"
                            ID="Attachments1" MultipleFilesUpload="true"  ItemTextTemplate="" OnAttachmentAdded="Attachments1_AttachmentAdded">                    
                        </CuteWebUI:UploadAttachments>
                        <p>
                            <asp:Button ID="ButtonDeleteAll" runat="server" Text="Delete All" OnClick="ButtonDeleteAll_Click" />&nbsp;&nbsp;
                            <asp:Button ID="ButtonTellme" runat="server" Text="Show Uploaded File Information"
                                OnClick="ButtonTellme_Click" />
                        </p>
                        <p>
                            Server Trace:
                            <br />
                            <asp:ListBox runat="server" ID="ListBoxEvents" Width="400"></asp:ListBox>
                        </p>               
            </div>
        </form>
    </body>
    </html>
    Regards,
    Eric

  •  08-08-2010, 9:54 PM 63243 in reply to 63088

    Re: Setting file queue background color

    Reply Quote
    Thankyou Eric, the code worked perfectly.
     
    One last question, is it possible to clear the list of uploaded files after the upload has completed?

  •  08-09-2010, 10:37 AM 63264 in reply to 63243

    Re: Setting file queue background color

    Reply Quote
    Hi,
     
    UploadAttachments will persist a list of the uploaded files.
     
    If you want to remove it, try use uploadAttachments1.DeleteAllAttachments() at the PreRender event.
     
    Regards,
    Terry
     

  •  08-10-2010, 12:44 AM 63286 in reply to 63264

    Re: Setting file queue background color

    Reply Quote
    Hi Terry,
     
    I created a PreRender event for my Uploader object, and called the DeleteAllAttachments() method within it, but it threw an exception. However, I have found a solution by creating an UploadCompleted event, and setting all attachment items to invisible.
     
    Final question - is there any way to customise the 'Cancel all uploads' button?

  •  08-10-2010, 7:57 AM 63296 in reply to 63286

    Re: Setting file queue background color

    Reply Quote
    Yes, you can customize "Cancel All" button.
    Please try the following code: 
    <%@ Page Language="C#" %>
    <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Sample</title>
        <style>
            .AjaxUploaderCancelAllButton
            {
                display: none !important;
            }
        </style>
        <script type="text/javascript">      
         function CuteWebUI_AjaxUploader_OnQueueUI(list) {
                var mycancelall = document.getElementById("mycancelall"); if (list.length < 2) {
                    mycancelall.style.display = "none"; return;
                }
                mycancelall.style.display = "";
            }
            function DoCancelAll() {
                var uploader = document.getElementById('<%=UploadAttachments1.ClientID %>');
                uploader.cancelall();
            }  
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" />
            <hr />
            <asp:Button runat="server" ID="BtnSubmit" Text="MySubmit" />
            <button id="mycancelall" onclick="DoCancelAll();return false;" style="display: none">
                Cancel All Uploads</button>
        </div>
        </form>
    </body>
    </html>
    Regards,
    Eric

  •  08-10-2010, 7:38 PM 63308 in reply to 63296

    Re: Setting file queue background color

    Reply Quote
    Works brilliant, thanks guys!
View as RSS news feed in XML