CODEWITHSUNDEEP
c#asp.netjqueryajax
lupital
lupital

Reputation:

FileUpload with UpdateProgress

UPDATE:
I've added a java script function:

function showWait()
            {
                if ($get('filUpload').value.length > 0)
                {
                    $get('UpdateProgress1').style.display = 'block';
                }
            }


 <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" OnClientClick="javascript:showWait();" Text="OK" CausesValidation="false" />

But I need this to work inside ajax ModalPopupExtender panel, so when i run the code the UpdateProgress appears but the animated gif doesn't get animated! it's static!

<head runat="server">
 <script type="text/javascript">
            function showWait()
            {                       
                $get('UpdateProgress1').style.display = 'block';               
            }



        </script>
    <title>Untitled Page</title>
    <link href="Controls/UploadFile.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>


    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>    

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Button id="btnShowPopup" runat="server" Text="Open" />
      <asp:Panel ID="pnlUploader" runat="server" CssClass="pnlUploader" Width="280px" style="display:none;" >      


        <div id ="pnlDragMe" class="pnlDragMe">Image Uploader </div>   
        <div id="uploaderContent" class="uploaderContent" runat="server">      
            Select File:
          <br />
          <asp:FileUpload ID="filUpload" runat="server" />
          &nbsp;<br />
          <div id="buttons" >
             <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" OnClientClick="javascript:showWait();"  Text="OK" CausesValidation="false" />
             <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
          </div> 
        </div>  
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
           <ProgressTemplate>
               <img alt="" src="Images/ajax-loader.gif" style="width: 48px; height: 48px" />
               Uploading image...
           </ProgressTemplate>
        </asp:UpdateProgress>      
            <asp:Label ID="lblFeedbackOK" SkinID="FeedbackOK" runat="server"></asp:Label>
            <asp:Label ID="lblFeedbackKO" SkinID="FeedbackKO" runat="server"></asp:Label>              


        <cc1:ModalPopupExtender ID="mdlPopup1" runat="server" 
           TargetControlID="btnShowPopup" PopupControlID="pnlUploader" 
           CancelControlID="btnCancel" BackgroundCssClass="modalBackground" 
           PopupDragHandleControlID="pnlDragMe" Drag="true" RepositionMode="None" />
      </asp:Panel>


    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnUpload" />
    </Triggers>    

</asp:UpdatePanel>

    </form>
</body>

I guess the animated gif is static because of PostBackTrigger.

Upvotes: 0

Views: 3982

Answers (1)

alexandermarcelo
alexandermarcelo

Reputation: 55

The FileUpload control does not work inside a UpdatePanel.

See http://msdn.microsoft.com/en-us/library/cc295545.aspx

Upvotes: 2

Related Questions