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

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!