jQuery File Download is a cross server platform compatible jQuery plugin that allows for an Ajax-like file download experience that isn’t normally possible using the web. For more information and documentation please visit: http://johnculviner.com/category/jQuery-File-Download.aspx

Note: In order for this plugin to work you must also write a cookie in an http header "Set-Cookie: fileDownload=true; path=/" as mentioned in the original blog post: http://johnculviner.com/post/2012/03/22/Ajax-like-feature-rich-file-downloads-with-jQuery-File-Download.aspx

The source can be found on GitHub: http://github.com/johnculviner/jquery.fileDownload/blob/master/src/Scripts/jquery.fileDownload.js

Simple rich user experience - jquery.fileDownload.js & jQuery UI Dialog

With jquery.fileDownload.js, uses the optional "options" argument to create a simple richer user experience using jQuery UI Dialog

File Name Description
Report0.pdf This file download will succeed
Report1.pdf This file download will fail
Report2.pdf This file download will succeed
Report3.pdf This file download will fail
Report4.pdf This file download will succeed

Toggle Source
        //
        // Simple rich user experience - jquery.fileDownload.js & jQuery UI Dialog
        // uses the optional "options" argument
        //
        //      the below uses jQuery "on" http://api.jquery.com/on/ (jQuery 1.7 + required, otherwise use "delegate" or "live") so that any 
        //      <a class="fileDownload..."/> that is ever loaded into an Ajax site will automatically use jquery.fileDownload.js
        //      if you are using "on":
        //          you should generally be able to reduce the scope of the selector below "document" but it is used in this example so it
        //          works for possible dynamic manipulation in the entire DOM
        //
        $(document).on("click", "a.fileDownloadSimpleRichExperience", function () {
            $.fileDownload($(this).prop('href'), {
                preparingMessageHtml: "We are preparing your report, please wait...",
                failMessageHtml: "There was a problem generating your report, please try again."
            });
            return false; //this is critical to stop the click event which will trigger a normal file download!
        });
    

Custom use with Promises - jquery.fileDownload.js

With jquery.fileDownload.js, uses promises to allow for a very customized experience easily

File Name Description
Report0.pdf This file download will succeed
Report1.pdf This file download will fail
Report2.pdf This file download will succeed
Report3.pdf This file download will fail
Report4.pdf This file download will succeed

Toggle Source
        //
        //With jquery.fileDownload.js
        //custom use with promises
        //
        $(document).on("click", "a.fileDownloadPromise", function () {
            $.fileDownload($(this).prop('href'))
                .done(function () { alert('File download a success!'); })
                .fail(function () { alert('File download failed!'); });

            return false; //this is critical to stop the click event which will trigger a normal file download
        });
    

POST Request: Simple rich user experience - jquery.fileDownload.js & jQuery UI Dialog

With jquery.fileDownload.js, uses data "options" argument to create a POST request to initiate a file download

Setting foo to an odd number will cause the file download to fail

Yes No


Toggle Source
        //
        // POST Request: Simple rich user experience - jquery.fileDownload.js & jQuery UI Dialog
        // uses data "options" argument to create a POST request from a form to initiate a file download
        //
        //      the below uses jQuery "on" http://api.jquery.com/on/ (jQuery 1.7 + required, otherwise use "delegate" or "live") so that any 
        //      <form class="fileDownloadForm" ... that is ever loaded into an Ajax site will automatically use jquery.fileDownload.js instead of the defualt form submit behavior
        //      if you are using "on":
        //          you should generally be able to reduce the scope of the selector below "document" but it is used in this example so it
        //          works for possible dynamic manipulation in the entire DOM
        //
        $(document).on("submit", "form.fileDownloadForm", function (e) {
            $.fileDownload($(this).prop('action'), {
                preparingMessageHtml: "We are preparing your report, please wait...",
                failMessageHtml: "There was a problem generating your report, please try again.",
                httpMethod: "POST",
                data: $(this).serialize()
            });
            e.preventDefault(); //otherwise a normal form submit would occur
        });
    

Custom rich user experience - jquery.fileDownload.js & jQuery UI Dialog

With jquery.fileDownload.js, uses the optional "options" argument to create a custom richer user experience using jQuery UI Dialog

File Name Description
Report0.pdf This file download will succeed
Report1.pdf This file download will fail
Report2.pdf This file download will succeed
Report3.pdf This file download will fail
Report4.pdf This file download will succeed

Toggle Source
        //Custom rich user experience - jquery.fileDownload.js & jQuery UI Dialog
        //uses the optional "options" argument
        //
        //      the below uses jQuery "on" http://api.jquery.com/on/ (jQuery 1.7 + required, otherwise use "delegate" or "live") so that any 
        //      <a class="fileDownload..."/> that is ever loaded into an Ajax site will automatically use jquery.fileDownload.js
        //      if you are using "on":
        //          you should generally be able to reduce the scope of the selector below "document" but it is used in this example so it
        //          works for possible dynamic manipulation in the entire DOM
        //
        $(function () {
            $(document).on("click", "a.fileDownloadCustomRichExperience", function () {

                var $preparingFileModal = $("#preparing-file-modal");

                $preparingFileModal.dialog({ modal: true });

                $.fileDownload($(this).prop('href'), {
                    successCallback: function (url) {

                        $preparingFileModal.dialog('close');
                    },
                    failCallback: function (responseHtml, url) {

                        $preparingFileModal.dialog('close');
                        $("#error-modal").dialog({ modal: true });
                    }
                });
                return false; //this is critical to stop the click event which will trigger a normal file download!
            });
        });
    
        

        
    

Stock Browser Behavior

Normal file download experience without using jquery.fileDownload.js. Ick!

File Name Description
Report0.pdf This file download will succeed
Report1.pdf This file download will fail
Report2.pdf This file download will succeed
Report3.pdf This file download will fail
Report4.pdf This file download will succeed