[SOLVED] Safari Blocks Animations on Postback, But FileUpload Cannot Use ASyncPostBackTigger in UpdatePanel

Issue

I’m in a bit of a conundrum here.

I have a FileUpload inside an UpdatePanel. As FileUpload cannot use an ASnycPostBackTrigger it must make use of a PostBackTrigger kind of defeating the purpose of AJAX (this is a security implementation I assume). Currently when my file upload begins, I show the user a loading gif and when the page posts back it hides the animation.

This works great for all browsers except Safari. Safari freezes all animations during full postback/redirects to save resources (meaning my gif will display but not animate). I am stuck as I am unsure how to render the loading animation as FileUpload cannot use partial postback behavior.

Anyone have any ideas on how to render animations during file transfer in Safari?

UPDATE PANEL

<asp:UpdatePanel runat="server" ID="updatePanel">
    <ContentTemplate>
        <div class="wrapper">
            <asp:Panel runat="server" ID="masterPanel">                  
                <asp:FileUpload ID="fileUpload1" runat="server" AllowMultiple="true" /> 
                <asp:Button ID="btnUpload" Text="Submit" runat="server" UseSubmitBehavior="false" 
    OnClientClick="return submitFiles()" />               
            </asp:Panel>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnUpload"  />
    </Triggers>
</asp:UpdatePanel>
   

PROGRESS PANEL (HOLDS LOADING ANIMATION

<asp:UpdateProgress ID="loadingProgess" AssociatedUpdatePanelID="updatePanel" runat="server">
       <ProgressTemplate>
           <asp:Panel runat="server" id="loading" >
              <div>
                 <asp:Image src="loader.gif" runat="server" ID="loadingImage" />
              </div>
         </asp:Panel>
     </ProgressTemplate>      
</asp:UpdateProgress>

SCRIPTS

<script type="text/javascript">    
        function UploadFile(fileUpload) {
            if (fileUpload.value != '') {
                //Display animation
                document.getElementById('<% Response.Write(loadingProgess.ClientID); %>').style.display = "inline"; 
                //Posts files    
                submitFiles();          
            }
        }
</script>

Solution

Have you tried a CSS animation instead of GIF?
Check this.

Answered By – dobre.b

Answer Checked By – David Goodson (BugsFixing Volunteer)