NeatUpload – Inline Progress Bar and ClientID

When I started using Neatupload, I wanted the progress bar to be displayed inline. The examples provided showed some JavaScript that enabled this, however in my application the controls displayed in the page were renamed by ASP (i.e. adding th ctl_…. prefixes), this then throughout the JavaScript.

note: Before looking at this you must be aware that to get this working you need to disable Sessionstate on the page. This is done in the first line of the aspx page

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="MultipleFile.aspx.vb" Inherits="MultipleFile" EnableSessionState="false" %>

This may have consequences on your application, please review the NeatUpload manual for more informaiton. In my situation I had to recode my masterpagefile that was looking for session variables, I had to detect whether the session was valid, I include the VB code here for reference.

If Me.Context.Session IsNot Nothing Then
    Session("sPreviousURL") = Request.ServerVariables("HTTP_REFERER")
End If

Below I show the JavaScript code needed to enable the inline progress bar to be displayed. I believe this should work with all instances (i.e. in the demo.aspx, where the control ID remains the same as in the aspx page, and when the control is being renamed by asp.net).

The hide/show progress bar script works by changing the style on a div tag that surrounds the iFrame in which the progress bar is display.

window.onload = function() {
    var inlineProgressBar = NeatUploadPB.prototype.Bars["<%= inlineProgressBar.ClientID %>"];
    var origDisplay = inlineProgressBar.Display;
    inlineProgressBar.Display = function() {
        var elem = document.getElementById(this.ClientID);
        elem.parentNode.style.display = "block";
        origDisplay.call(this);
        }
    inlineProgressBar.EvalOnClose = "NeatUploadMainWindow.document.getElementById('" + inlineProgressBar.ClientID + "').parentNode.style.display = \"none\";";
}

Below I show the full aspx page, including the JavaScript.

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="MultipleFile.aspx.vb" Inherits="MultipleFile" EnableSessionState="false" %>
<%@ Register TagPrefix="Upload" Namespace="Brettle.Web.NeatUpload" Assembly="Brettle.Web.NeatUpload" %>
<asp:Content ID="Home_CPH" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
    <script type="text/javascript">
            window.onload = function() {
            var inlineProgressBar = NeatUploadPB.prototype.Bars["<%= inlineProgressBar.ClientID %>"];
                var origDisplay = inlineProgressBar.Display;
                inlineProgressBar.Display = function() {
                    var elem = document.getElementById(this.ClientID);
                    elem.parentNode.style.display = "block";
                    origDisplay.call(this);
                }
                inlineProgressBar.EvalOnClose = "NeatUploadMainWindow.document.getElementById('"
		+ inlineProgressBar.ClientID + "').parentNode.style.display = \"none\";";
            }
    </script>
    <asp:UpdatePanel ID="UpdatePanel_Progress" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <ContentTemplate>
           <asp:panel id="MultipleFileUploadform" runat="server"  visible="false">
                <Upload:MultiFile id="multiFileId" runat="server" UseFlashIfAvailable="true" FlashFilterExtensions="*.raw;*.wiff">
                    <input type="button" value="Pick Files..." class="Button" />
                </Upload:MultiFile>
                <br />
                <asp:Button id="submitButtonId" runat="server" Text="Submit" class="Button"/>
                <input type="submit" value="Cancel" text="Cancel" class="Button"/>
            </asp:panel>
            <div style="display:none;">
                <Upload:ProgressBar id="inlineProgressBar" runat="server" inline="true" style="width: 100%;" Triggers="submitButtonId"/>
            </div>
        <asp:label id="ResultMsg" runat="server" Visible="False" ForeColor="#ff0033"></asp:label>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

NeatUpload – Inline Progress Bar and ClientID