Unable to hide a Gif image after file download from server.(C# and javascript)

Question

I have a tricky situation :

There is UI which just has a button. On button click I process a PowerPoint document in the server (I add some relevant content to the slide) and then download it to the client system.

Now when the user clicks the download button, I show a small animated gif saying "processing", but when the PowerPoint file downloads into the client system I am not able to hide or disable the "processing image".

This is the Serverside Code:

HttpContext.Current.Response.ContentType = "APPLICATION /OCTET-STREAM";

String Header = "Attachment; Filename=" + FileName;
HttpContext.Current.Response.AppendHeader("Content-Disposition", Header);
//for the server

//for normal 
System.IO.FileInfo Dfile = new System.IO.FileInfo(PPTPath);

HttpContext.Current.Response.WriteFile(Dfile.FullName);

This is the Client Side Code :

ShowProcessMessage = function(PanelName)
{
    document.getElementById(PanelName).hidden = "";
    document.getElementById("Image1").style.visibility = "visible";

    return true; //Returns the control to the Server click event
}

Can anyone give some Ideas on how to implement?

Answer 1

Possible solution is do client side ajax call. use beforeSend to show spinner and complete to hide spinner (complete triggers on succes of failure)

$.ajax({
        url: linktoPdf
                , beforeSend: function (xhr) { $('#idOfSpinner').addClass("showSpinner"); }
                , complete: function () { $('#idOfSpinner').removeClass("showSpinner"); }
                , success: function (response)  { /*your code here */ }
            , error: function () { /*your code here */ }
    });