File Download requests using jquery/POST request with psuedo ajax

filedownloader.js

// Takes a URL, param name, and data string
// Sends to the server.. The server can respond with binary data to download
jQuery.download = function(url, key, data){
    // Build a form
    var form = $('<form></form>').attr('action', url).attr('method', 'post');
    // Add the one key/value
    form.append($("<input></input>").attr('type', 'hidden').attr('name', key).attr('value', data));
    //send request
    form.appendTo('body').submit().remove();
};

sinatra_server.rb

# A Tidbit of sinatra code to respond
# Assume url is a set variable
# Assume 'key' is the key of the value used in the javascript

post url do
  data = params[:key]
  puts request.body.read
  headers['Content-Type'] = "application/octet-stream"

  body(data)
end

This is flippin brilliant. There are numerous questions on StackOverflow concerning how to trigger a file download via a POST request, and all of the answers say it's impossible, and that it must be done by setting the window URL.
You need to show them the truth.

This works a treat, Thanks!

Thanks man, I was looking for days...

This is phenomenal. Thanks for sharing.

Thanks for sharing, it is working.

Perfect!

Thanks, works perfectly and is simpler than most (all ?) proposed solutions seen on stackoverflow

This is awesome! I added (to the form element) a target="_blank" attribute as well to preserve the requesting page.

Very helpfull. Thanks!

I am little new to JS. I have been searching for the similar answer for a while. I get a response from server like following:

Content-Disposition:attachment; filename=Agency1.zip
Content-Type: application/octet-stream
Date: 2016 May 5 19:41:32+4m 53s
Server: Apache-Coyote/1.1
Transfer-Encoding: chunked

Now the task is to download this response(a .zip file) on User's local system without user being redirected to an URL or a prompt asking him/her to click a button to download the this zip file. After making an AJAX(POST) request I get a success data. Now I do not know how to proceed.

I tried the solution provided by you. It does not make a call to the URL provided neither does it throw an error. Also, can you tell me how will one handle "on success" and "on error" call back from server response when the solution works. Kindly pardon me if I am being naive here. I am little clueless and new to this :)

kudos!

function download(url, data){

    var form = $('<form></form>').attr('action', url).attr('method', 'post');

    Object.keys(data).forEach(function(key){
        var value = data[key];

        if(value instanceof Array) {
            value.forEach(function (v) {
                form.append($("<input></input>").attr('type', 'hidden').attr('name', key).attr('value', v));
            });
        } else {
            form.append($("<input></input>").attr('type', 'hidden').attr('name', key).attr('value', value));
        }

    });    

    //send request
    form.appendTo('body').submit().remove();
};

I modified the line

var form = $('<form></form>').attr('action', url).attr('method', 'post');
var form = $('<form></form>').attr('action', url).attr('method', 'post').attr('target', '_blank');

I use the angle with socket.io and the way the connection was interrupted, that way it was perfect for my case.

Thanks

Just amazing, thank you very much!

David Mah!! Long time no speak. :) This is a great trick, just found it on google and used it.

really helps , thanks a ton :)

awesome, thanks

6 years..and still working like magic :)

Perfect

🥇 Thanks a lot @DavidMah 👍

Even if it's not working for my part 😞

Are the key and data attributes essential if I remove the "input" line (line 8) ? It only redirects me.

function download(url){
    var form = $('<form></form>').attr('action', url).attr('method', 'post').attr('target', '_blank');
    form.appendTo('body').submit().remove();
}

EDIT: Sorry, I think it is my fault. Not sure yet
EDIT2: Okay, My problem is now solved Thanks again 😄

Here is a more readable coffeescript version :)

attrs = { action: '/target-path.csv', method: 'post', target: '_blank' }
params = { key1: 'value1', key2: 'value2' }
form = $('<form></form>').attr(k, v) for k, v of attrs
form.append $('<input></input>').attr('type', 'hidden').attr('name', k).attr('value', v) for k, v of params
form.appendTo('body').submit().remove()

Server returned error #400.

I have more than two files to be downloaded at the page. If I click at one file and click the next one before the first download is completed only second file gets downloaded and first one is failing. Please let me know if someone of you have resolved this issue.

Just found today a very simple solution
window.location.href = 'urltofile';

Thanks, man, you saved the day!