Use cookies to help execute custom JavaScript after a file starts to download

RELATED TO:

AUTHOR: Peter Milchev

DATE POSTED: October 15, 2018

HOW TO

Detect when the file is ready to start downloading.

DESCRIPTION

Usually, when a file is being downloaded, the server clears the response and responds with the file to download. 

SOLUTION

To workaround this, we can add a cookie to the response on the server and look for it in the client-side. To achieve that, before sending the request to the server, we can start checking for this cookie on a given interval of time until the cookie is present. Once the cookie is present, we will know that the server responded with the file and we can do our custom logic and clear the cookie.

<telerik:RadButton runat="server" ID="RadButton1" OnClientClicking="OnClientClicking" OnClick="RadButton1_Click" Text="Download File" AutoPostBack="true" /> 

function OnClientClicking(sender, args) {
    pollingAPI.startPolling(function (cookieMessage) {
        alert(cookieMessage)
    }, 200);
}


var cookieAPI = (function (undefined) {
    function clearCookie(cookieName) {
        setCookie(cookieName, "", new Date());
    }
 
    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }
 
    return {
        getCookie: getCookie,
        setCookie: setCookie,
        clearCookie: clearCookie
    }
})(); 

 

var pollingAPI = (function (cookieAPI) {
    function startPolling(callbackFunction, pollingInterval) {
        var cookieName = "file-download";
        pollingInterval = pollingInterval || 500;
        cookieAPI.clearCookie(cookieName);
 
        var interval = setInterval(function () {
            var cookieMessage = cookieAPI.getCookie(cookieName);
 
            if (cookieMessage) {
                clearInterval(interval);
 
                // use message form server
                callbackFunction(cookieMessage)
                //console.log(cookieMessage);
 
                // clear cookie
                cookieAPI.clearCookie(cookieName)
            }
        }, pollingInterval);
    }
 
    return {
        startPolling: startPolling
    }
 
})(cookieAPI);

 

protected void RadButton1_Click(object sender, EventArgs e)
{
    Response.Clear();
 
    //Indicate the type of data being sent
    Response.ContentType = "application/octet-stream";
 
    //Name the file
    Response.AddHeader("Content-Disposition", "attachment; filename=\"someFile.txt\"");
 
    // simulate long server processing
    Thread.Sleep(4000);
    Response.BinaryWrite(Encoding.UTF8.GetBytes("This is a dummy file"));
 
    // add cookie to know the file begins downloading
    HttpCookie myCookie = new HttpCookie("file-download");
    myCookie.Value = "The file started downloading!";
    HttpContext.Current.Response.Cookies.Add(myCookie);
 
    Response.End();
}

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.