Updates
- jquery.fileDownload.js source
- Demo of jQuery File Download in action using MVC 3
- Changelog
- Available on GitHub, bring on the pull requests if you are interested in contributing!
Update background
Per the request of several jQuery File Download users and to make jQuery File Download far as useful as possible I have added the ability to perform a file download using any httpMethod of your choosing including POST requests.
Simple form POST based example
This example is wired up to override default form behavior and perform a POST through jQuery File Download for any form with class=”fileDownloadForm” that is ever loaded into a site
//
// 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).attr('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
});Advanced Usage
A developer can now specify a data option. This can be either a key=value&… param list or a JavaScript object {…} just like the built in jQuery $.get and $.post functions. Here are some other ways jQuery File Download could be called:
GET request with data
$.fileDownload('/GetAFoo', { httpMethod : "GET", data: { foo : "bar"}})
//or
$.fileDownload('/GetAFoo', { httpMethod : "GET", data: "foo=bar"})
//or
$.fileDownload('/GetAFoo', { httpMethod : "GET", data: $.param({foo : "bar"})})
Results in:
GET /GetAFoo?foo=bar
POST request with data and query string
$.fileDownload('/GetAFoo?a=b', { httpMethod : "POST", data: { foo : "bar"}})Results in:
POST /GetAFoo?a=b Content-Type: application/x-www-form-urlencoded Content-Length: 7 foo=bar
GET request with data and query string
$.fileDownload('/GetAFoo?a=b', { httpMethod : "GET", data: { foo : "bar"}})Results in:
GET /GetAFoo?a=b&foo=bar
Enjoy!
Let me know if you have any feedback or feature requests (or just add some features yourself!)
Great news and great new feature!
I do have one worry:
Imagine a situation where the user submits two different downloads at the same time in the same session (like in two browser tabs). Wouldn't the "onSuccess"-callback be called for both of them once either on of them is complete? (cookies are sort of "shared variables")
If this is indeed an issue, could it maybe be solved by giving each cookie an unique name (automatically?)
Does anyone have any thoughts on this?
Hi Rasmus,
You are absolutely right about the cookies possibly causing problems across tabs. I can't easily think of a way to accomplish this without writing additional randomly generated cookie or param values to the file download request and then immediately removing them. I'm not sure the likelyhood of this happening in the wild but it would certainly be a problem if it did! What do you think?
One solution could be to automatically generate an unique/random name for the cookie in the JavaScript and then pass this to the server (in the same manner as any other thing in the data-keyword). The server should then create the cookie with the specified name. Would that work?
Yup that could definitely work. The source is out on GitHub for contributions, I may attempt to add something in future releases along these lines if no one beats me to it. Unfortunately adding this would make the required server side code a bit more complex (not huge though)
Hi,
Thanx, the pluign looks good but what i try to attempt is to get a base64 string from the server and create a pdf out of it and download it directly at client side. That obviously doesnot seem to work with all browsers same – just chrome and safari work fine:
[quote]<a href="javascript:demo1()">Run Code 1</a>
<script type="text/javascript">
function demo1() {
jsPDF.init();
jsPDF.addPage();
jsPDF.text(20, 20, 'Hello world!');
jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
// Making Data URI
var out = jsPDF.output();
var url = 'data:application/pdf;base64,' + Base64.encode(out);
document.location.href = url;
}
</script>[/quote]
Thats why i tried your plugin. But i guess it does not support these datauri, right? Would be great addition or may be some help in this regard for a workaround – IF this is possible cuz JS isnt tht leniant for clientside security issues?
oops sorry … the js function spit out some code …. tht was no hack attempt 😉
wow …. ur comment section is somehow executing js … better disallow it …. greets
I’ve implemented the example you have for the POST, obviously I do not have the server-side code as you do.
I have a Java Servlet and it filters through the HttpServletRequest reads the contentType as and then reads in the databytes. Reports that the string of data has a length of 36 (sometimes 37). Then I print out that string and it’s empty, not null.
So I do not know how that is happeneing.
The process I have for reading the request and pulling the data content is proven to work since April of this year. I have been trying to replace the Jquery $.ajax call I used to do a POST with your $.fileDownload POST funciton [quote] $.fileDownload(‘/GetAFoo?a=b’, { httpMethod : “POST”, data: { foo : “bar”}}) [/quote]
and I get the results as noted above. The ajax call works fine, but I need a better way to retrieve the file I generate without having a pop-up window.
One thing to note, if I take you example page replace the POST’s form action to my Servlet’s path, grab all the js files, css files, and then run it. When I click the submit button, it throws an error stating $.fileDownload is not a funciton and points to the “data: ${this}.serialize()” section.
When I place the $.fileDownload call under a homemade function, no reports of an issue, yet the issue noted at the top. The “data:” option is where you pass data to the Servlet correct?