Cross Browser file download on a button click compatible with Chrome and IE?

Question

Images are hosted outside the server and are downloaded only to the user (client side).

I have tried the HTML5 download tag, but it does not work very well with IE.

<div style="width:800px; height:457px; background-image:url('http://i.imgur.com/7fypLpI.jpg');"></div>
<a href="http://i.imgur.com/7fypLpI.jpg" download="http://i.imgur.com/7fypLpI.jpg">Download</a>

https://jsfiddle.net/eLpc8d7u/

How can I download the files for example with JavaScript for any browser?

I've seen this other question: IE download file

But I'm still confused to make a single script.

It's not exactly what you want but you can use part of my answer from here: http://stackoverflow.com/questions/39589917/show-a-progress-bar-for-downloading-files-using-xhr2-ajax/39599878#39599878 (check the javascript code inside the `onreadystatechange` there) — Dekel, Dec 02 '16 at 01:51
Which IE version are you targeting, IE<10 or IE>=10 or both? — Aruna, Dec 02 '16 at 01:53

Aruna · Accepted Answer · 2016-12-07T01:02:52.607

2

For cross browser download including IE < 10 and IE >= 10, you can use the below library which will do task easy for you.

http://danml.com/js/download.js

GitHub Location: https://github.com/rndme/download

Sample code snippet for your case:

function downloadImage(event, url, fileName) {
  event.preventDefault();

  if(window.download && url) {   
     fileName = fileName || url.split('/').pop().split('?')[0];
     var ajax = new XMLHttpRequest();
          ajax.open( 'GET', url, true);
          ajax.responseType = 'blob';
          ajax.onload= function(e){ 
      download(e.target.response, fileName, 'application/octet-stream');
    };
          setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
       return ajax;
  }
}

<script src="http://danml.com/js/download.js"></script>
<div style="width:800px; height:457px; background-image:url('http://i.imgur.com/7fypLpI.jpg');"></div>
<a href="http://i.imgur.com/7fypLpI.jpg" onclick="downloadImage(event, 'http://i.imgur.com/7fypLpI.jpg')">Download with default file name</a><br/>
<a href="http://i.imgur.com/7fypLpI.jpg" onclick="downloadImage(event, 'http://i.imgur.com/7fypLpI.jpg', 'testImage.jpg')">Download with custom file name</a>

edited Dec 07 '16 at 01:02

answered Dec 02 '16 at 02:34

Aruna

11,959
3
28
42

Thanks! Your example works fine here but on my server it returns the following error: "Xmlhttprequest cannot load no access-control-allow-origin header is present" Is not it unsafe to enable that? – ephramd Dec 02 '16 at 09:24
Is not compatible with FF – ephramd Dec 02 '16 at 10:42
You can enable it only for the particular domain and not for all. – Aruna Dec 02 '16 at 10:44
Let me check for FF – Aruna Dec 02 '16 at 10:44
Okay, its a minor issue with `event` reference and fixed the same for FF now. Can you check now? – Aruna Dec 02 '16 at 10:51
I have tried the following with the a tag and with only divs: http://jsbin.com/fihozixozu/edit?html,css,js,output Buttom 3 "ONLY DIV WITH PREVENT" works on IE and Chrome. But no code works for me in Firefox. – ephramd Dec 02 '16 at 11:53
For 'A' tag, you should use `preventDefault`. The reason for this is, otherwise it will be redirected to the url specified in `href` attribute. For div, its not required. So out of the 4 links you have, 3 links working fine for me in all the browsers including Firefox. Check your browser console for any errors. – Aruna Dec 02 '16 at 12:04
Thanks for replying again. Have you tried this last code from jsbin.com or another site? Since jsbin does not work for me in Firefox. Debug reports missing CORS (Access-Control-Allow-Origin) I'm researching on that. In my server for example, no link works for that. I have tried setting it from php: But it does not seem to be enough. – ephramd Dec 02 '16 at 12:12
Yes I tried from this link `http://jsbin.com/fihozixozu/edit?html,css,js,output` and no issues for me. Anyways it may depend on the browser version you have. Don't worry about `CORS` issue and its nothing to do with the above scripts. As long as you use this script in your own server, `CORS` issue won't occur. It will only occur, if you try one site from another site (cross origin) and your server blocks this request. Check the scripts locally instead of jsbin. – Aruna Dec 02 '16 at 12:18
I have not finished understanding it. As you say I have tried the code in local and works perfect in all 3 browsers (including Android) =) . However the same code on the server complains about this headers. "XMLHttpRequest cannot load http://i.imgur.com/7fypLpI.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://myserver' is therefore not allowed access." – ephramd Dec 02 '16 at 12:28
Oh, I was using another picture link !! This works on my server: Http://i.imgur.com/7fypLpI.jpg But this one does not: Http://cdn1-www.comingsoon.net/assets/uploads/gallery/doctor-strange-1403135280/cf5nqhcxiae59i9-jpg-large.jpg @Aruna I investigate about it. Thank you very much for all the help, it has been very useful! – ephramd Dec 02 '16 at 12:32
You can try the image URL from your own server instead of a third party server which prevents CORS from specific server IP. You can google more about CORS to understand this. – Aruna Dec 02 '16 at 12:32
Hi again! Do you use this library / script? I've write on github because I can't rename a file. When I open the downloaded image it indicates erroneous headers .. https://github.com/rndme/download/issues/43 – ephramd Dec 05 '16 at 17:01
Let me check this today – Aruna Dec 05 '16 at 21:38
@ephramd I have updated the answer above and please have a look for this. There are two links now one with default file name and other with custom file name. – Aruna Dec 07 '16 at 01:03
thanks you again! Your response is spectacular! You deserve a 10/10 xD – ephramd Dec 12 '16 at 08:58

Cross Browser file download on a button click compatible with Chrome and IE?

1 Answers1