Download a file using jQuery after creating it in the server

When I click a button on the client side I want to invoke a public static webmethod on the server side using AJAX. The static method will create the appropriate file. After the file is created I need to download it to the client desktop. I’ve found John Culvinar’s jquery filedownload plugin but haven’t been able to implement it so far. I know that using this plugin also requires writing a cookie so that it knows that the download is complete. Where do I put this code in the server side? After creating the file? I’d be very glad if someone could show me a sample on this scenario, maybe on jsfiddle.net

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I suggest replacing your ajax request with a hidden iframe, then when your server returns said file, it will automatically ask the user to download it.

//name of iframe
var strName = ("uploader" + (new Date()).getTime());
// the iframe
var jFrame = $( "<iframe name="" + strName + "" src="about:blank" />" ).css( "display", "none" );

jFrame.load(function( objEvent ){     
    // at this point the user should have been asked to download a file.

    // Remove the iFrame from the document.
    // Because FireFox has some issues with
    // "Infinite thinking", let's put a small
    // delay on the frame removal.
    setTimeout(function(){
        jFrame.remove();
    },100);
});

var form = $('<form>').attr( "action", "upload_act.cfm" )
    .attr( "method", "post" )
    .attr( "enctype", "multipart/form-data" )
    .attr( "encoding", "multipart/form-data" )
    .attr( "target", strName );

form.append('<input type="hidden" name="somename">').val("someval");

$( "body:first" ).append( jFrame, form );

(The above code was original adapted from http://www.bennadel.com/blog/1244-ColdFusion-jQuery-And-AJAX-File-Upload-Demo.htm)

An alternative would be to make it a two step process. Step 1 generates the file and returns a url, step 2 the user clicks download ( which would be an anchor tag pointing at said url).

Method 2

If you’re wanting to use the jquery plugin for an enhanced user experience, you cant initiate the download from the server. Best bet in that case would be to generate the file on the server and have that method return the path to the file. Then just dl using the plugin.

Example:

$('#btnID').click(function(){
$.ajax({
        type: "POST",
        url: "/your_webmethod_url",
        data: "{'webmethodParam1':'val1','webmethodParam2':'val2'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: fileGenerated,
        error: fileNotGenerated
    });
});

function fileGenerated(data, textStatus, jqXHR){
  //this is the success callback method.  start download automatically using the plugin
  $.fileDownload(data.d); //returned data from webmethod goes in data.d
}
function fileNotGenerated(jqXHR, textStatus, errorThrown){
  //this is the error callback method.  do something to handle the error
  alert(errorThrown);
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0