OK but I am trying to simulate as said I need to show the loading panel and after downloading the file I need to hide it is it possible to return byte array from handler and achieve it
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Filehandler.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div clientidmode="static" runat="server" id="loadingPanel" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<img src="../Images/ajax-loader_clock.gif" alt="Loading..." />
</div>
</div>
</div>
<input type="button" id="btnDownload" value="Download" />
</form>
<script type="text/javascript">
$("#btnDownload").on("click", function () {
const loadingPanel = $("#loadingPanel");
loadingPanel.show();
$.ajax({
url: "FileHandler.ashx",
method: "GET",
xhrFields: { responseType: "blob" }, // Expect a binary response
success: function (data, status, xhr) {
// Create a blob from the response data
const blob = new Blob([data], { type: xhr.getResponseHeader("Content-Type") });
// Extract the filename from Content-Disposition header
const contentDisposition = xhr.getResponseHeader("Content-Disposition");
const fileName = contentDisposition
? contentDisposition.split("filename=")[1]?.trim().replace(/"/g, "")
: "DownloadedFile.pdf";
// Create a temporary link and trigger the download
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
// Clean up
URL.revokeObjectURL(url);
$(a).remove();
},
error: function (xhr) {
console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
alert(`Failed to download the file. Please try again.`);
},
complete: function () {
loadingPanel.hide();
}
});
});
</script>
</body>
</html>
I am trying as follows
<%@ WebHandler Language="C#" Class="FileHandler" %>
using System;
using System.Web;
using System.Web.SessionState;
public class FileHandler : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
try
{
string base64String = "";
byte[] invoicePdfByteArray = ConvertBase64ToPdfByteArray(base64String);
if (invoicePdfByteArray.Length > 0)
{
DeliverFile(context, invoicePdfByteArray, "application/pdf", invoicePdfByteArray.Length, "StatementOfAccounts");
}
}
catch (Exception ex)
{
// Handle exceptions gracefully
context.Response.StatusCode = 500;
context.Response.StatusDescription = ex.Message;
context.Response.Write($"Error: {ex.Message}");
context.Response.End();
}
}
public bool IsReusable => false;
public byte[] ConvertBase64ToPdfByteArray(string base64String)
{
try
{
return string.IsNullOrWhiteSpace(base64String) ? new byte[0] : Convert.FromBase64String(base64String);
}
catch
{
return new byte[0];
}
}
public void DeliverFile(HttpContext context, byte[] data, string type, int length, string downloadFileName)
{
context.Response.Clear();
context.Response.ContentType = type;
context.Response.Headers.Add("Access-Control-Allow-Origin", "*");
context.Response.ContentType = "application/pdf";
context.Response.AddHeader("Content-Disposition", "attachment; filename=\"StatementOfAccounts.pdf\"");
context.Response.BinaryWrite(data); // Ensure 'data' is the byte array
context.Response.End();
}
}
