How can I let a user download multiple files when a button is clicked

Question

So I have a httpd server running which has links to a bunch of files   Lets say the user selects three files from a file list to download and they re located at   mysite com file1  mysite com file2 mysite com file3   When they click the download button I want them to download these three files from the links above     My download button looks something like   var downloadButton   new Ext Button     text   Download     handler  function          download the three files here

User · Answer

It is possible when using Tampermonkey  Firefox or Chrome     They added the GM Download command    You can use it like this download multiple files One time         UserScript       name             description      match            grant            grant       GM download function setup reader file        var name   file name      var reader   new FileReader        reader onload   function  e            var bin   e target result    get file content         var lines   bin split   n            for  var line   0  line  lt  lines length  line                  console log lines line                GM download lines line   line     jpg                           reader readAsBinaryString file       reader readAsText file   utf-8

User · Answer

This is the easiest way I have found to download multiple files     body   on  click    download btn  function        downloadFiles             File1 pdf    File1-link-here              File2 pdf    File2-link-here              File3 pdf    File3-link-here              File4 pdf    File4-link-here              function downloadFiles files       if files length    0           return            file   files pop        var Link      body   append   lt a href  quot   file 1    quot  download  quot file 0  quot  gt  lt  a gt         Link 0  click         Link remove        downloadFiles files      This should be work for you  Thank You

User · Answer

Found the easiest way to do this  Works even with div    lt div onclick  downloadFiles    gt     lt  --do not put any text in  lt a gt   it should be invisible-- gt     lt a href  path file1  id  a1  download gt  lt  a gt     lt a href  path file2  id  a2  download gt  lt  a gt     lt a href  path file3  id  a3  download gt  lt  a gt     lt script gt      function downloadFiles           document getElementById  a1   click          document getElementById  a2   click          document getElementById  a3   click             lt  script gt    Download  lt  div gt    That s all  hope it helps

User · Answer

The best way to do this is to have your files zipped and link to that   The other solution can be found here  How to make a link open multiple pages when clicked  Which states the following   HTML    lt a href     class  yourlink  gt Download lt  a gt    JS      a yourlink   click function e        e preventDefault        window open  mysite com file1        window open  mysite com file2        window open  mysite com file3          Having said this  I would still go with zipping the file  as this implementation requires JavaScript and can also sometimes be blocked as popups

User · Answer

This was the method which worked best for me and didn t open up new tabs  but just downloaded the files images I required   var filesForDownload       filesForDownload    path    path file1 txt   name   file1 txt       filesForDownload    path    path file2 jpg   name   file2 jpg       filesForDownload    path    path file3 png   name   file3 png       filesForDownload    path    path file4 txt   name   file4 txt         jq  input downloadAll   click  function  e         e preventDefault         var temporaryDownloadLink   document createElement  a        temporaryDownloadLink style display    none        document body appendChild  temporaryDownloadLink         for  var n   0  n  lt  filesForDownload length  n                   var download   filesForDownload n           temporaryDownloadLink setAttribute   href   download path            temporaryDownloadLink setAttribute   download   download name             temporaryDownloadLink click               document body removeChild  temporaryDownloadLink

User · Answer

lt  DOCTYPE html gt       lt html ng-app  app  gt           lt head gt               lt title gt               lt  title gt               lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  gt               lt link rel  stylesheet  href  style css  gt           lt  head gt           lt body ng-cloack gt                       lt div class  container  ng-controller  FirstCtrl  gt                            lt table class  table table-bordered table-downloads  gt                   lt thead gt                     lt tr gt                       lt th gt Select lt  th gt                       lt th gt File name lt  th gt                       lt th gt Downloads lt  th gt                     lt  tr gt                   lt  thead gt                   lt tbody gt                     lt tr ng-repeat    tableData in tableDatas  gt                       lt td gt                           lt div class  checkbox  gt                             lt input type  checkbox  name    tableData name    id    tableData name    value    tableData name    ng-model   tableData checked  ng-change  selected    gt                           lt  div gt                       lt  td gt                       lt td gt   tableData fileName   lt  td gt                       lt td gt                           lt a target   self  id  download-  tableData name    ng-href    tableData filePath    class  btn btn-success pull-right downloadable  download gt download lt  a gt                       lt  td gt                     lt  tr gt                                 lt  tbody gt                 lt  table gt                   lt a class  btn btn-success pull-right  ng-click  downloadAll    gt download selected lt  a gt                    lt p gt   selectedone   lt  p gt               lt  div gt               lt script src  https   ajax googleapis com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt               lt script src  https   ajax googleapis com ajax libs angularjs 1 4 8 angular min js  gt  lt  script gt               lt script src  script js  gt  lt  script gt           lt  body gt       lt  html gt    app js   var app   angular module  app                    app controller  FirstCtrl      scope    http     filter   function  scope   http   filter     scope tableDatas          name   value1   fileName  file1   filePath   data file1 txt   selected  true        name   value2   fileName  file2   filePath   data file2 txt   selected  true        name   value3   fileName  file3   filePath   data file3 txt   selected  false        name   value4   fileName  file4   filePath   data file4 txt   selected  true        name   value5   fileName  file5   filePath   data file5 txt   selected  true        name   value6   fileName  file6   filePath   data file6 txt   selected  false           scope application            scope selected   function          scope application    filter  filter    scope tableDatas          checked  true             scope downloadAll   function         scope selectedone                angular forEach  scope application function val           scope selectedone push val name           scope id   val name                 angular element     val name  closest  tr   find   downloadable   0  click                                plunker example  https   plnkr co edit XynXRS7c742JPfCA3IpE p preview

User · Answer

You can either    Zip the selected files and return the one zipped file  Open multiple pop-ups each prompting for a download    Note - option one is objectively better   Edit Found an option three  https   stackoverflow com a 9425731 1803682

User · Answer

I fond that executing click   event on a element inside a for loop for multiple files download works only for limited number of files  10 files in my case   The only reason that would explain this behavior that made sense to me  was speed intervals of downloads executed by click   events    I figure out that  if I slow down execution of click   event  then I will be able to downloads all files    This is solution that worked for me   var urls        http   example com file1      http   example com file2      http   example com file3     var interval   setInterval download  300  urls    function download urls      var url   urls pop       var a   document createElement  a      a setAttribute  href   url     a setAttribute  download          a setAttribute  target     blank      a click       if  urls length    0        clearInterval interval           I execute download event click   every 300ms  When there is no more files to download urls length    0 then  I execute clearInterval on interval function to stop downloads

User · Answer

This works in all browsers  IE11  Firefox  Microsoft Edge  Chrome and Chrome Mobile  My documents are in multiple select elements  The browsers seem to have issues when you try to do it too fast    So I used a timeout    lt select class  document  gt       lt option val  word docx  gt some word document lt  option gt   lt  select gt     user clicks a download button to download all selected documents         downloadDocumentsButton   click function              var interval   1000            select elements have class name of  document              document   each function  index  element                var doc     element  val                if  doc                    setTimeout function                          window location   doc                     interval    index   1                                        This solution uses promises   function downloadDocs docs        docs 0  then function  result            if  result web                window open result doc                     else               window location   result doc                    if  docs length  gt  1                setTimeout function      return downloadDocs docs slice 1       2000                             downloadDocumentsButton   click function          var files               document   each function  index  element            var doc     element  val            var ext   doc split      doc split      length - 1            if  doc  amp  amp    inArray ext  docTypes   gt  -1                files unshift Promise resolve   doc  doc  web  false                        else if  doc  amp  amp     inArray ext  webTypes   gt  -1    ext includes                      files push Promise resolve   doc  doc  web  true                             downloadDocs files

User · Answer

I ve solved this a different way by using window location  It works in Chrome  which fortunately is the only browser I had to support  Might be useful to someone  I d initally used Dan s answer  which also needed the timeout I ve used here or it only downloaded one file   var linkArray       linkArray push  http   example com downloadablefile1    linkArray push  http   example com downloadablefile2    linkArray push  http   example com downloadablefile3         function  linkArray      for  var i   0  i  lt  linkArray length  i           setTimeout function  path    window location   path     200   i   200  linkArray i

[javascript] How can I let a user download multiple files when a button is clicked?

Examples related to javascript

Examples related to html

Examples related to apache

Examples related to extjs

Examples related to download