jQuery File Download v1.1.0 Released 7

by John Culviner

The Basics

Updated:

Original post
jquery.fileDownload.js source
Demo of jQuery File Download in action using MVC 3
Changelog

Whats new?

In order to make jQuery File Download a little bit easier to use for a rich user experience (jQuery UI required) I have added some additional “options” arguments. These options arguments create a jQuery UI dialog using the specified HTML for different download lifecycle events.

preparingMessageHtml – this HTML is displayed in a jQuery UI dialog immediately after the user clicks a jQuery File Download enabled link. If the file download is a success or failure the dialog is automatically hidden.
failMessageHtml – this HTML is displayed in a jQuery UI dialog if a failure occurs in the file download.
dialogOptions – the “options” argument that gets passed into jQuery UI dialog. Lets you get all custom with your dialog set up if you’d like. Defaults to { modal : true }.

New Example Code


//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.fileDownloadSimpleRichExperience", function() {
        $.fileDownload($(this).attr('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!
    });
});

//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.fileDownloadSimpleRichExperience", function() {

$.fileDownload($(this).attr('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!

});

Head on over to the demo to see it in action (top example)

More robust demo page

I have also added source toggling to the demo page so that it is very easy to see the corresponding source code to a given example.

Enjoy!

As always let me know if you can think of any cool features to add or have any questions/problems.

7 thoughts on “jQuery File Download v1.1.0 Released”

Reply Las Vegas GE Appliance Service Sep 14,2014 6:32 pm

I’m really enjoying the theme/design of your wweb site. Do yyou ever run into aany internet browser compatibility issues?
A small number of my blog visitors have complained about my website not working
correctly in Exploer but looks great in Chrome. Do you
have any ideas to help fixx this problem?
Reply Benaya Paul May 5,2014 6:08 am

really nice plugin for ajax download, thanks…
Reply John Apr 29,2012 8:54 pm

POST support has been added: http://johnculviner.com/post/2012/04/29/jQuery-File-Download-v120-Released-and-on-GitHub.aspx

Enjoy!

John
Reply John Apr 25,2012 11:10 pm

Almost done with adding support for any HTTP Method (POST included) you'd like! Just running into a few last problems with good old IE here…

John
Reply Jon Z Apr 25,2012 9:59 am

I would also like a way to post to download.. that would be super sweet
Reply John Apr 20,2012 9:20 pm

Hi Ed,

Great question. There currently isn't a mechanism to do this in the plugin. I would say well just use $.post(..) but wait we can't do that because of the whole file download part… ha. I think I have an idea on how to implement this. I'll post an update early next week to account for this and a few other tweaks/bug fixes. Also if you are interested this is on GitHub ready to be forked if you can think of some other good ideas. https://github.com/johnculviner/jquery.fileDownload

Stay tuned…

John
Reply Ed Giardina Apr 20,2012 3:50 pm

I like the demos. Because this is MVC, I often use POST to indicate a file download (land on Route /a/b for a 'Generate File' button, post to Route /a/b to request file. I noticed you're using an iFrame in the source. Not sure if we can POST to an iframe. Would be interested to know if there's a parameter we could pass for GET vs POST in your code.

johnculviner.com