jqueryfiledownload.apphb.comjquery.fileDownload.js Demo

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 0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 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! }); }); We are preparing your report, please wait... There was a problem generating your report, please try again. 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 We are preparing your report, please wait... There was a problem generating your report, please try again....