1

So i have a table listing files, each file's URL is stored as a data attribute on a button. On clicking a button I want to fire a Javascript/Ajax call that will download the file at the URL.

Now some caveats,

  1. The file needs to be downloaded via a download dialog or needs to just be added to the Browsers downloads as you would expect.
  2. The request needs to be able to take headers as this is a cross domain request.
  3. This needs to work on the main browsers (IE, Chrome, Firefox, Safari)

So far I have tried to use XMLHttpRequest:

e.preventDefault();
var csrftoken = getCookie('csrftoken');
var req = new XMLHttpRequest;
req.open("POST",$(this).data("url"));
req.setRequestHeader("MY HEADER", "HEADER VALUE;");
req.withCredentials = true;
req.send();

I've also tried Ajax GET request (which doesnt force the download) and using the Download attribute on an anchor tag (which doesnt accept headers).

Thanks

Malekai
  • 43
  • 10
  • Is there a reason why you can't simply use ``? – light Jun 30 '15 at 14:19
  • AJAX makes exactly 0 sense. Just use a regular ` – Mjh Jun 30 '15 at 14:20
  • @light: [caveat #3, I suppose.](http://caniuse.com/#feat=download) – David Hedlund Jun 30 '15 at 14:20
  • As i said in my question, as far as I am aware the link there does not let you include request headers. as this is a cross domain request – Malekai Jun 30 '15 at 14:21
  • Use a form and submit it? The response will force the download. You end up not moving from the page where you were. – Mjh Jun 30 '15 at 14:22
  • Do you have control of the server? Content-disposition is a response-header, and it feels weird that you are putting it in a request. Or is your request actually passing an "attachment" to the server? – light Jun 30 '15 at 14:25
  • No, clearly I have therefore misunderstood the use of content-disposition. Will remove the reference from the code example above – Malekai Jun 30 '15 at 14:27
  • 1
    This question is still vague, explain WHAT it is you're trying to do, not "how" it is you think you should do it. Please – Mike Jun 30 '15 at 14:28
  • So... do you have control of the server? If so, what server is it? PHP / Node / Java? Because it largely depends on the server to serve a HTTP response as a download. – light Jun 30 '15 at 14:30
  • I'm afraid I don't, and I'm also not sure but I believe its Java. – Malekai Jun 30 '15 at 14:36
  • So would the XMLHttpRequest work if the server was configured with the right response-headers? – Malekai Jun 30 '15 at 14:36
  • Why are you convinced this is the only avenue you have, when you are not even telling us what it is you're actually trying to do? There may be other options available, especially when it's not your server, relying on response headers is a bad idea because if they change their server at any point, you're web app/website is just going to break... – Mike Jun 30 '15 at 14:37
  • Because I dont understand what you mean when you say you dont know WHAT im trying to do. I'm trying to download a file from an external source without redirecting or reloading the page. From what I understand about this (which I admit isnt a hell of a lot) I need to do a request to the URL of the file, and know that I need to pass headers as its a Cross Domain request. Thats all I know about this. – Malekai Jun 30 '15 at 14:39
  • Try using my new approach, I've edited my answer below. – Mike Jun 30 '15 at 14:53

2 Answers2

4

Instead of using anchor tag, which is not cross-browser compliant (apparently, I didn't realize Microsoft was so slow to getting the HTML5 spec.. Not unexpected though)

We can utilize the iframe, to avoid redirect and to achieve this effect while maintaining cross-browser compliancy.

<iframe width="1" height="1" frameborder="0" src="[File location]"></iframe>

As long as the file isn't an .html or some kind of file that can be displayed via browser (.htm, .html, .xhtml, .aspx, etc) then it should download the file.

Mike
  • 874
  • 1
  • 8
  • 15
  • As far as I am aware the Download attribute doesnt allow you to include request headers. – Malekai Jun 30 '15 at 14:20
  • Maybe you're not fully explaining what you're trying to do then. What is it you need to be doing, exactly? – Mike Jun 30 '15 at 14:21
  • On clicking a button I the file at the URL. The file needs to be downloaded via a download dialog or needs to just be added to the Browsers downloads as you would expect. The request needs to be **able to take headers as this is a cross domain request.** This needs to work on the main browsers (IE, Chrome, Firefox, Safari) – Malekai Jun 30 '15 at 14:22
  • The response headers will set the content-disposition. If you have control of the content at URL you could force the client to download by setting the response headers. http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery – JD Williams Jun 30 '15 at 14:23
0

You have to capture the url first, and then:

document.location = 'data:Application/octet-stream,' + encodeURIComponent("http://somedomain.com/somefile.some");

or

window.open("http://somedomain.com/somefile.some");

You don't need headers with this approach.

Lucas Tettamanti
  • 1,360
  • 8
  • 10