JavaScript: How to open a returned file via AJAX

Question

This is similar to: How to open a file using JavaScript?

Goal: to retrieve/open a file on an image's double click

function getFile(filename){
   // setting mime this way is for example only
   var mime = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
   
   jQuery.ajax({ url      : 'get_file.pl',
                 data     : {filename:filename}, 
                 success  : function(data){
                               var win = window.open('','title');
                               win.document.open(mime);
                               win.document.write(data);
                               win.document.close();
                            }
               });
}

jQuery('#imgID').dblclick(function(){ 
   getFile('someFile.docx');
});

I'm doing this off the top of my head, but I think the above would work for text files, but not binary. Is there a plugin that does this properly? The ideal would be to open the file in the browser (or application), rather than download, but I doubt that is a dream. If the file must be downloaded with the save/open dialog, that's fine.

Edit:

One piece of information that I forgot to mention is that I'd like this to be a POST request. This is partly why I was looking at AJAX to begin with. I've seen workarounds that have created forms/iframes to do something similar, but I was looking for a better handler of the returned info.

As far as I know, browsers prevent direct application execution (for security purposes I believe) unless a plugin is installed on the browser (like flash, adobe reader etc), or a handler was assigned (like magnet links). Otherwise, it would only let you save the file and open it manually. — Joseph
– Joseph, Commented Jun 12, 2012 at 23:02
What's the difference to the similiar question you've linked? — Bergi
– Bergi, Commented Jun 12, 2012 at 23:02
@Bergi: good question. (1) the question I linked to is using Prototype and in my example I'm using jQuery; I'm not sure if there is a difference in the returned object from their AJAX request, but I think jQuery's data returns text/string. (2) I may have not specified one crucial detail, that I would like to avoid a GET request. — vol7ron
– vol7ron, Commented Jun 13, 2012 at 13:32
@Bergi: then again, the answer in the page I linked to is dealing with responseText, so I guess they were similar in that regard; however, that question was from nearly 3 years ago and a lot has changed in javascript since then, especially with wider adoption of HTML5. — vol7ron
– vol7ron, Commented Jun 13, 2012 at 13:38

josh3736 · Accepted Answer · 2012-06-13 17:18:46Z

5

Seems to me there's no reason to do this via AJAX. Just open the new window to get_file.pl?filename=... and let the browser handle it. If the user has a plugin capable of handling the Content-Type sent by get_file.pl, the file will display; otherwise, it should download like any other file.

function getFile(filename) {
   window.open('get_file.pl?filename=' + filename,'title');
}

jQuery('#imgID').dblclick(function() { 
   getFile('someFile.docx');
});

Edit: If you want to POST to your script, you can do it with some <form> hackery:

function getFile(filename) {
    var win = 'w' + Math.floor(Math.random() * 10000000000000);
    window.open('', win,'width=250,height=100');
    var f = $('<form></form>')
            .attr({target: win, method:'post', action: 'get_file.pl'})
            .appendTo(document.body);

    var i = $('<input>')
            .attr({type:'hidden',name:'filename',value:filename})
            .appendTo(f);

    f[0].submit();
    f.remove();
}

Of course, this is somewhat silly since it is impossible to hide your data from "prying eyes" with developer tools. If your filename really is sensitive, issue access tokens to the client, and look up the data in your sever script.

edited Jun 13, 2012 at 17:18

answered Jun 12, 2012 at 23:09

josh3736

146k34 gold badges227 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vol7ron Over a year ago

Can you open a new window through a POST request? Usually, this is not suggested, but there may be some data we want to keep hidden from prying eyes.

Bergi Over a year ago

No, window.open does not support POST. All data is visible to the user, but if you don't want it to show up in the address bar you could transfer it with cookies.

Bergi Over a year ago

OK, you can POST into such a window, that's true.

vol7ron Over a year ago

I still wish there was a better way w/o Flash or form/iframe controls, but I suppose this will do. I suspect HTML5 may have a better file-handling technique.

Collectives™ on Stack Overflow

JavaScript: How to open a returned file via AJAX

Goal: to retrieve/open a file on an image's double click

Edit:

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Goal: to retrieve/open a file on an image's double click

Edit:

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related