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
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
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
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
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!
We are preparing your report, please wait...
There was a problem generating your report, please try again.