starting file download with JavaScript

Question

Let s say I have download links for files on my site    When clicked these links send an AJAX request to the server which returns the URL with the location of the file    What I want to do is direct the browser to download the file when the response gets back  Is there a portable way to do this

User · Answer

A agree with the methods mentioned by maxnk, however you may want to reconsider trying to automatically force the browser to download the URL. It may work fine for binary files but for other types of files (text, PDF, images, video), the browser may want to render it in the window (or IFRAME) rather than saving to disk.

If you really do need to make an Ajax call to get the final download links, what about using DHTML to dynamically write out the download link (from the ajax response) into the page? That way the user could either click on it to download (if binary) or view in their browser - or select "Save As" on the link to save to disk. It's an extra click, but the user has more control.

User · Answer

If this is your own server application then i suggest using the following header  Content-disposition  attachment  filename fname ext   This will force any browser to download the file and not render it in the browser window

User · Answer

A agree with the methods mentioned by maxnk, however you may want to reconsider trying to automatically force the browser to download the URL. It may work fine for binary files but for other types of files (text, PDF, images, video), the browser may want to render it in the window (or IFRAME) rather than saving to disk.

If you really do need to make an Ajax call to get the final download links, what about using DHTML to dynamically write out the download link (from the ajax response) into the page? That way the user could either click on it to download (if binary) or view in their browser - or select "Save As" on the link to save to disk. It's an extra click, but the user has more control.

User · Answer

I d suggest window open   to open a popup window  If it s a download  there will be no window and you will get your file  If there is a 404 or something  the user will see it in a new window  hence  their work will not be bothered  but they will still get an error message

User · Answer

We do it that way  First add this script    lt script type  text javascript  gt  function populateIframe id path         var ifrm   document getElementById id       ifrm src    download php path   path     lt  script gt    Place this where you want the download button here we use just a link     lt iframe id  frame1  style  display none  gt  lt  iframe gt   lt a href  javascript populateIframe  frame1    lt  php echo  path    gt     gt download lt  a gt    The file  download php   needs to be put on your server  simply contains    lt  php     header  Content-Type  application octet-stream       header  Content-Disposition  attachment  filename     GET  path        readfile   GET  path       gt    So when you click the link  the hidden iframe then gets opens the sourcefile  download php   With the path as get parameter   We think this is the best solution   It should be noted that the PHP part of this solution is a simple demonstration and potentially very  very insecure  It allows the user to download any file  not just a pre-defined set  That means they could download parts of the source code of the site itself  possibly containing API credentials etc

User · Answer

Why are you making server side stuff when all you need is to redirect browser to different window location href   Here is code that parses  file  QueryString  taken from this question  and redirects user to that address in 1 second  works for me even on Android browsers     lt script type  text javascript  gt      var urlParams       window onpopstate   function              var match          pl       g      Regex for replacing addition symbol with a space         search        amp           amp     g          decode   function  s    return decodeURIComponent s replace pl                    query   window location search substring 1            urlParams               while  match   search exec query               urlParams decode match 1      decode match 2                    window onload   function             var path   urlParams  file            setTimeout function     document location href   path     1000            lt  script gt    If you have jQuery in your project definitely remove those window onpopstate  amp  window onload handlers and do everything in   document  ready function

User · Answer

If this is your own server application then i suggest using the following header  Content-disposition  attachment  filename fname ext   This will force any browser to download the file and not render it in the browser window

User · Answer

To get around the security flaw in the top-voted answer  you can set the iframe src directly to the file you want  instead of an intermediate php file  and set the header information in an  htaccess file    lt Files   apk gt       ForceType application force-download      Header set Content-Disposition attachment      Header set Content-Type application vnd android package-archive      Header set Content-Transfer-Encoding binary  lt  Files gt

User · Answer

Try this lib https   github com PixelsCommander Download-File-JS it s more modern than all solutions described before because uses  download  attribute and combination of methods to bring best possible experience   Explained here - http   pixelscommander com en javascript javascript-file-downliading-ignore-content-type   Seems to be ideal piece of code for starting downloading in JavaScript

User · Answer

Just call window location href   new url from your javascript and it will redirect the browser to that URL as it the user had typed that into the address bar

User · Answer

To get around the security flaw in the top-voted answer  you can set the iframe src directly to the file you want  instead of an intermediate php file  and set the header information in an  htaccess file    lt Files   apk gt       ForceType application force-download      Header set Content-Disposition attachment      Header set Content-Type application vnd android package-archive      Header set Content-Transfer-Encoding binary  lt  Files gt

User · Answer

I have created an open source jQuery File Download plugin  Demo with examples   GitHub  which could also help with your situation  It works pretty similarly with an iframe but has some cool features that I have found quite handy    User never leaves the same page they initiated a file download from  This feature is becoming crucial for modern web applications Tested cross browser support  including mobile   It supports POST and GET requests in a manner similar to jQuery s AJAX API successCallback and failCallback functions allow for you to be explicit about what the user sees in either situation In conjunction with jQuery UI a developer can easily show a modal telling the user that a file download is occurring  disband the modal after the download starts or even inform the user in a friendly manner that an error has occurred  See the Demo for an example of this

User · Answer

Reading the answers - including the accepted one I d like to point out the security implications of passing a path directly to readfile via GET    It may seem obvious to some but some may simply copy paste this code    lt  php     header  Content-Type  application octet-stream       header  Content-Disposition  attachment  filename     GET  path        readfile   GET  path       gt    So what happens if I pass something like   path to fileWithSecrets  to this script  The given script will happily send any file the webserver-user has access to   Please refer to this discussion for information how to prevent this  How do I make sure a file path is within a given subdirectory

User · Answer

If this is your own server application then i suggest using the following header  Content-disposition  attachment  filename fname ext   This will force any browser to download the file and not render it in the browser window

User · Answer

If this is your own server application then i suggest using the following header  Content-disposition  attachment  filename fname ext   This will force any browser to download the file and not render it in the browser window

User · Answer

A agree with the methods mentioned by maxnk, however you may want to reconsider trying to automatically force the browser to download the URL. It may work fine for binary files but for other types of files (text, PDF, images, video), the browser may want to render it in the window (or IFRAME) rather than saving to disk.

If you really do need to make an Ajax call to get the final download links, what about using DHTML to dynamically write out the download link (from the ajax response) into the page? That way the user could either click on it to download (if binary) or view in their browser - or select "Save As" on the link to save to disk. It's an extra click, but the user has more control.

User · Answer

Just call window location href   new url from your javascript and it will redirect the browser to that URL as it the user had typed that into the address bar

User · Answer

I d suggest window open   to open a popup window  If it s a download  there will be no window and you will get your file  If there is a 404 or something  the user will see it in a new window  hence  their work will not be bothered  but they will still get an error message

User · Answer

We do it that way  First add this script    lt script type  text javascript  gt  function populateIframe id path         var ifrm   document getElementById id       ifrm src    download php path   path     lt  script gt    Place this where you want the download button here we use just a link     lt iframe id  frame1  style  display none  gt  lt  iframe gt   lt a href  javascript populateIframe  frame1    lt  php echo  path    gt     gt download lt  a gt    The file  download php   needs to be put on your server  simply contains    lt  php     header  Content-Type  application octet-stream       header  Content-Disposition  attachment  filename     GET  path        readfile   GET  path       gt    So when you click the link  the hidden iframe then gets opens the sourcefile  download php   With the path as get parameter   We think this is the best solution   It should be noted that the PHP part of this solution is a simple demonstration and potentially very  very insecure  It allows the user to download any file  not just a pre-defined set  That means they could download parts of the source code of the site itself  possibly containing API credentials etc

User · Answer

Just call window location href   new url from your javascript and it will redirect the browser to that URL as it the user had typed that into the address bar

User · Answer

A agree with the methods mentioned by maxnk, however you may want to reconsider trying to automatically force the browser to download the URL. It may work fine for binary files but for other types of files (text, PDF, images, video), the browser may want to render it in the window (or IFRAME) rather than saving to disk.

If you really do need to make an Ajax call to get the final download links, what about using DHTML to dynamically write out the download link (from the ajax response) into the page? That way the user could either click on it to download (if binary) or view in their browser - or select "Save As" on the link to save to disk. It's an extra click, but the user has more control.

User · Answer

In relation to the top answer I have a possible solution to the security risk    lt  php      if isset   GET  path               if in array   GET  path    glob                          header  Content-Type  application octet-stream                 header  Content-Disposition  attachment  filename     GET  path                  readfile   GET  path                         gt    Using the glob   function  I tested the download file in a path one folder up from the file to be downloaded  I was able to make a quick array of files that are  allowed  to be downloaded and checked the passed path against it  Not only does this insure that the file being grabbed isn t something sensitive but also checks on the files existence at the same time    Note  Javascript   HTML   HTML    lt iframe id  download  style  display none  gt  lt  iframe gt    and   lt input type  submit  value  Download  onclick  ChangeSource  document path   return false   gt    JavaScript    lt script type  text javascript  gt       lt  --         function ChangeSource path               document getElementByID  download   src    path to php path     document path                -- gt   lt  script gt

User · Answer

Why are you making server side stuff when all you need is to redirect browser to different window location href   Here is code that parses  file  QueryString  taken from this question  and redirects user to that address in 1 second  works for me even on Android browsers     lt script type  text javascript  gt      var urlParams       window onpopstate   function              var match          pl       g      Regex for replacing addition symbol with a space         search        amp           amp     g          decode   function  s    return decodeURIComponent s replace pl                    query   window location search substring 1            urlParams               while  match   search exec query               urlParams decode match 1      decode match 2                    window onload   function             var path   urlParams  file            setTimeout function     document location href   path     1000            lt  script gt    If you have jQuery in your project definitely remove those window onpopstate  amp  window onload handlers and do everything in   document  ready function

User · Answer

I d suggest window open   to open a popup window  If it s a download  there will be no window and you will get your file  If there is a 404 or something  the user will see it in a new window  hence  their work will not be bothered  but they will still get an error message

User · Answer

Try this lib https   github com PixelsCommander Download-File-JS it s more modern than all solutions described before because uses  download  attribute and combination of methods to bring best possible experience   Explained here - http   pixelscommander com en javascript javascript-file-downliading-ignore-content-type   Seems to be ideal piece of code for starting downloading in JavaScript

User · Answer

In relation to the top answer I have a possible solution to the security risk    lt  php      if isset   GET  path               if in array   GET  path    glob                          header  Content-Type  application octet-stream                 header  Content-Disposition  attachment  filename     GET  path                  readfile   GET  path                         gt    Using the glob   function  I tested the download file in a path one folder up from the file to be downloaded  I was able to make a quick array of files that are  allowed  to be downloaded and checked the passed path against it  Not only does this insure that the file being grabbed isn t something sensitive but also checks on the files existence at the same time    Note  Javascript   HTML   HTML    lt iframe id  download  style  display none  gt  lt  iframe gt    and   lt input type  submit  value  Download  onclick  ChangeSource  document path   return false   gt    JavaScript    lt script type  text javascript  gt       lt  --         function ChangeSource path               document getElementByID  download   src    path to php path     document path                -- gt   lt  script gt

User · Answer

I d suggest window open   to open a popup window  If it s a download  there will be no window and you will get your file  If there is a 404 or something  the user will see it in a new window  hence  their work will not be bothered  but they will still get an error message

User · Answer

Just call window location href   new url from your javascript and it will redirect the browser to that URL as it the user had typed that into the address bar

User · Answer

I suggest to make an invisible iframe on the page and set it s src to url that you ve received from the server - download will start without page reloading   Or you can just set the current document location href to received url address  But that s can cause for user to see an error if the requested document actually does not exists

User · Answer

I suggest to make an invisible iframe on the page and set it s src to url that you ve received from the server - download will start without page reloading   Or you can just set the current document location href to received url address  But that s can cause for user to see an error if the requested document actually does not exists

User · Answer

Reading the answers - including the accepted one I d like to point out the security implications of passing a path directly to readfile via GET    It may seem obvious to some but some may simply copy paste this code    lt  php     header  Content-Type  application octet-stream       header  Content-Disposition  attachment  filename     GET  path        readfile   GET  path       gt    So what happens if I pass something like   path to fileWithSecrets  to this script  The given script will happily send any file the webserver-user has access to   Please refer to this discussion for information how to prevent this  How do I make sure a file path is within a given subdirectory

User · Answer

I suggest to make an invisible iframe on the page and set it s src to url that you ve received from the server - download will start without page reloading   Or you can just set the current document location href to received url address  But that s can cause for user to see an error if the requested document actually does not exists

User · Answer

I suggest to make an invisible iframe on the page and set it s src to url that you ve received from the server - download will start without page reloading   Or you can just set the current document location href to received url address  But that s can cause for user to see an error if the requested document actually does not exists

User · Answer

I have created an open source jQuery File Download plugin  Demo with examples   GitHub  which could also help with your situation  It works pretty similarly with an iframe but has some cool features that I have found quite handy    User never leaves the same page they initiated a file download from  This feature is becoming crucial for modern web applications Tested cross browser support  including mobile   It supports POST and GET requests in a manner similar to jQuery s AJAX API successCallback and failCallback functions allow for you to be explicit about what the user sees in either situation In conjunction with jQuery UI a developer can easily show a modal telling the user that a file download is occurring  disband the modal after the download starts or even inform the user in a friendly manner that an error has occurred  See the Demo for an example of this

[javascript] starting file download with JavaScript

Examples related to javascript

Examples related to ajax

Examples related to download