Download file served as response

Question

I'm trying to achieve the following : On the client side ,using Jquery/Ajax , I make a Post request to my Django server. On the server side I get this request, extract parameters ,based on that I determine a file path and then I build a HttpResponse , with the intention of having the browser to download that file.

However this doest not happen, although I see in the response the content of the attached file.

The response is build as :

 response = HttpResponse(file(path_to_file))
 response['Content-Type'] = 'application/force-download'
 response['Content-Length'] = os.path.getsize(path_to_file)
 response['Content-Disposition'] = 'attachment; filename=\"request.txt\"'
 response['Accept-Ranges'] = 'bytes'
 return response

Here's the Response headers as seen with firebug

Accept-Ranges   bytes
Connection  keep-alive
Content-Disposition attachment; filename=grequest.txt
Content-Length  228
Content-Type    application/force-download
Date    Fri, 18 Jul 2014 14:55:33 GMT
Server  nginx/1.4.4
Set-Cookie  sessionid=41602cd107bbddb41e8884a88c9035c0; Path=/
Vary    Authorization, Cookie

and here's the response content ,seen with firebug

eyJub2RlSUQiOiIwMmI1ODMtYjNhMTljLWM1MjkwYi05YzAwIiwiYWxpYXMiOiJsb2NhbGhvc3QiLCJkbnNOYW1lIjoibG9jYWxob3N0IiwiY2hhc3Npc1NlcmlhbCI6IiIsImFjdGl2YXRpb25zIjpbeyJhY3RpdmF0aW9uSUQiOiI3RjE3LUZFRUQtMTI5Ny1GOTUyIiwicXVhbnRpdHkiOiIzIn1dfQ==

In this case the content of the attached file

Any suggestion on what I am doing wrong ?

Solution

Try

html

<a id="download" download="" href="">download</a>

js

$(function() {
    var request = function (url, filename) {
     /* var file = {json : JSON.stringify([ "eyJub2RlSUQiOiIwMmI1ODMtYjNhMTljLWM1MjkwYi05YzAwIiwiYWxpYXMiOiJsb2NhbGhvc3QiLCJkbnNOYW1lIjoibG9jYWxob3N0IiwiY2hhc3Npc1NlcmlhbCI6IiIsImFjdGl2YXRpb25zIjpbeyJhY3RpdmF0aW9uSUQiOiI3RjE3LUZFRUQtMTI5Ny1GOTUyIiwicXVhbnRpdHkiOiIzIn1dfQ=="])}; */
    $.ajax({
        beforeSend : function(jqxhr, settings) {
            jqxhr.filename = filename;
        },
        url : url,
        type : "POST",
        dataType : "text json",
        /* data : file, */
        success : function(data, textStatus, jqxhr) {
        $("a#download").attr({
            "download" : jqxhr.filename,
            "href" : "data:text/plain;base64," + data /* data[0] */       
        }).get(0).click();
        }
    });
    };
    request("/echo/json/", "request.txt")
});

jsfiddle http://jsfiddle.net/guest271314/Xd4zk/

Comments

[steve]

Could you add a few lines of code to make it clearer ?

[knbk]

@steve There are plenty of examples floating around on the web by people who know a lot more about html/javascript than I do. I suggest you search for 'hidden iframe download' or 'window location download'.

[steve]

Thanks , I will continue investigating this