Download multiple files with a single action

Question

I am not sure if this is possible using standard web technologies   I want the user to be able to download multiple files in a single action  That is click check boxes next to the files  and then get all the files that were checked   Is it possible - if so what basic strategy do you recommend  I know I can use comets technology to create server side events that trigger an HttpResponse but I am hoping there is a simpler way

User · Answer

Easiest way would be to serve the multiple files bundled up into a ZIP file.

I suppose you could initiate multiple file downloads using a bunch of iframes or popups, but from a usability standpoint, a ZIP file is still better. Who wants to click through ten "Save As" dialogs that the browser will bring up?

User · Answer

HTTP does not support more than one file download at once   There are two solutions    Open x amount of windows to initiate the file downloads  this would be done with JavaScript  preferred solution create a script to zip the files

User · Answer

The following script done this job gracefully   var urls      https   images pexels com photos 432360 pexels-photo-432360 jpeg    https   images pexels com photos 39899 rose-red-tea-rose-regatta-39899 jpeg      function downloadAll urls        for  var i   0  i  lt  urls length  i          forceDownload urls i   urls i  substring urls i  lastIndexOf      1 urls i  length         function forceDownload url  fileName       var xhr   new XMLHttpRequest        xhr open  GET   url  true       xhr responseType    blob       xhr onload   function            var urlCreator   window URL    window webkitURL          var imageUrl   urlCreator createObjectURL this response           var tag   document createElement  a            tag href   imageUrl          tag download   fileName          document body appendChild tag           tag click            document body removeChild tag             xhr send

User · Answer

To improve on  Dmitry Nogin s answer  this worked in my case    However  it s not tested  since I am not sure how the file dialogue works on various OS browser combinations   Thus community wiki     lt script gt      download   click function          download   http   www arcelormittal com ostrava doc cv doc                   http   www arcelormittal com ostrava doc cv doc          var download   function  ar        var prevfun function          ar forEach function address              var pp prevfun          var fun function                     var iframe       lt iframe style  visibility  collapse   gt  lt  iframe gt                        body   append iframe                   var content   iframe 0  contentDocument                  var form     lt form action      address      method  POST  gt  lt  form gt                    content write form                     form  submit                    setTimeout function                               document  one  mousemove   function        lt --slightly hacky                          iframe remove                            pp                                              2000                     prevfun fun                   prevfun          lt  script gt

User · Answer

This works in all browsers  IE11  firefox  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     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 is a solution that 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 am looking for a solution to do this  but unzipping the files in javascript was not as clean as I liked  I decided to encapsulate the files into a single SVG file    If you have the files stored on the server  I don t   you can simply set the href in the SVG   In my case  I ll convert the files to base64 and embed them in the SVG   Edit  The SVG worked very well  If you are only going to download the files  ZIP might be better  If you are going to display the files  then SVG seems superior

User · Answer

By far the easiest solution  at least in ubuntu linux      make a text file with the urls of the files to download  i e  file txt  put the  file txt  in the directory where you want to download the files open the terminal in the download directory from the previous lin download the files with the command  wget -i file txt    Works like a charm

User · Answer

x000D   x000D  var links     x000D     https   s3 amazonaws com Minecraft Download launcher Minecraft exe   x000D     https   s3 amazonaws com Minecraft Download launcher Minecraft dmg   x000D     https   s3 amazonaws com Minecraft Download launcher Minecraft jar  x000D     x000D   x000D  function downloadAll urls    x000D    var link   document createElement  a    x000D   x000D    link setAttribute  download   null   x000D    link style display    none   x000D   x000D    document body appendChild link   x000D   x000D    for  var i   0  i  lt  urls length  i      x000D      link setAttribute  href   urls i    x000D      link click    x000D      x000D   x000D    document body removeChild link   x000D    x000D   lt button onclick  downloadAll window links   gt Test me  lt  button gt  x000D   x000D   x000D

User · Answer

A jQuery version of the iframe answers   function download files          each files  function key  value                lt iframe gt  lt  iframe gt                 hide                attr  src   value               appendTo    body                 load function                     var that   this                  setTimeout function                           that  remove                       100

User · Answer

You can create a temporary set of hidden iframes  initiate download by GET or POST inside of them  wait for downloads to start and remove iframes    lt  DOCTYPE HTML gt   lt html gt   lt body gt     lt button id  download  gt Download lt  button gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 jquery min js  gt  lt  script gt     lt script type  text javascript  gt            download   click function            download  http   nogin info cv doc   http   nogin info cv doc                   var download   function            for var i 0  i lt arguments length  i               var iframe       lt iframe style  visibility  collapse   gt  lt  iframe gt                 body   append iframe            var content   iframe 0  contentDocument           var form     lt form action      arguments i       method  GET  gt  lt  form gt             content write form               form   content  submit             setTimeout  function iframe               return function                   iframe remove                              iframe   2000                             lt  script gt   lt  body gt   lt  html gt    Or  without jQuery    function download    urls        urls forEach url   gt          let iframe   document createElement  iframe          iframe style visibility    collapse         document body append iframe          iframe contentDocument write            lt form action    url replace     g         method  GET  gt  lt  form gt                  iframe contentDocument forms 0  submit           setTimeout      gt  iframe remove    2000

User · Answer

Here is the way I do that  I open multiple ZIP but also other kind of data  I export projet in PDF and at same time many ZIPs with document    I just copy past part of my code  The call from a button in a list    url pdf    pdf php id 7    url zip1    zip php id 8    url zip2    zip php id 9    btn pdf     lt a href   javascript     onClick   return open multiple        url pdf      url zip1      url zip2        gt  n    btn pdf      lt img src            images icones pdf png   alt   Ver   gt  n    btn pdf      lt  a gt  n    So a basic call to a JS routine  Vanilla rules     here is the JS routine    function open multiple base url publication             URL of pages to open are coma separated      tab url   url publication split            var nb   tab url length          Loop against URL          for  var x   0  x  lt  nb  x                   window open tab url x                     Base is the dest of the caller page as         sometimes I need it to refresh      if  base                        window location href    base                 The trick is to NOT give the direct link of the ZIP file but to send it to the browser  Like this      type mime    application zip  application x-compressed-zip     the mime    Content-type     type mime    tdoc size   filesize   the zip path     the length    Content-Length       tdoc size    tdoc nom    Pesquisa zip     the content disposition    Content-Disposition  attachment  filename      tdoc nom          header  Cache-Control  no-cache  must-revalidate       HTTP 1 1   header  Expires  Sat  26 Jul 1997 05 00 00 GMT         Date in the past   header  the mime     header  the length     header  the content disposition         Clear the cache or some  sh     will be added   ob clean      flush      readfile  the zip path     exit

User · Answer

Below code 100  working    Step 1  Paste below code in index html file   lt  DOCTYPE html gt   lt html ng-app  ang  gt    lt head gt       lt title gt Angular Test lt  title gt       lt meta charset  utf-8    gt   lt  head gt    lt body gt       lt div ng-controller  myController  gt           lt button ng-click  files    gt Download All lt  button gt       lt  div gt        lt script src  angular min js  gt  lt  script gt       lt script src  index js  gt  lt  script gt   lt  body gt    lt  html gt    Step 2  Paste below code in index js file   use strict    var x   angular module  ang             x controller  myController   function   scope   http            var arr                  file  http   localhost angularProject w3logo jpg   fileName   imageone                 file  http   localhost angularProject cv doc   fileName   imagetwo                 file  http   localhost angularProject 91 png   fileName   imagethree                        scope files   function                 angular forEach arr  function val  key                     http get val file                   then function onSuccess response                        console log  res   response                       var link   document createElement  a                        link setAttribute  download   val fileName                       link setAttribute  href   val file                       link style display    none                       document body appendChild link                       link click                         document body removeChild link                                       catch function onError error                        console log  error   error                                                          NOTE   Make sure that all three files which are going to download will be placed in same folder along with angularProject index html or angularProject index js files

User · Answer

Angular solution      HTML        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                                working example  https   plnkr co edit XynXRS7c742JPfCA3IpE p preview

User · Answer

Getting list of url with ajax call and then use jquery plugin  to download multiple files parallel       ajax           type   POST           url  URL          contentType   application json  charset utf-8           dataType   json           data  data          async  true          cache  false          beforeSend  function                  blockUI  body                       complete  function      unblockUI  body               success  function  data                 here data -- gt  contains list of urls with comma seperated             var listUrls  data DownloadFilePaths split                   listUrls forEach function  url                      fileDownload url                               return false                      error  function  result                    mdlNoDataExist   modal  show

User · Answer

lt p class  style1  gt      lt a onclick  downloadAll window links   gt Balance Sheet Year 2014-2015 lt  a gt    lt  p gt    lt script gt   var links        pdfs IMG pdf      pdfs IMG 0001 pdf     pdfs IMG 0002 pdf     pdfs IMG 0003 pdf    pdfs IMG 0004 pdf    pdfs IMG 0005 pdf     pdfs IMG 0006 pdf       function downloadAll urls      var link   document createElement  a       link setAttribute  download   Balance Sheet Year 2014-2015      link style display    none      document body appendChild link      for  var i   0  i  lt  urls length  i          link setAttribute  href   urls i        link click           document body removeChild link      lt  script gt

User · Answer

When using Ajax components it is possible to start multiple downloads  Therefore you have to use https   cwiki apache org confluence display WICKET AJAX update and file download in one blow  Add an instance of AJAXDownload to your Page or whatever  Create an AjaxButton and override onSubmit  Create an AbstractAjaxTimerBehavior and start downloading           button   new AjaxButton  button2              private static final long serialVersionUID   1L            Override         protected void onSubmit AjaxRequestTarget target  Form lt   gt  form                        MultiSitePage this info this               target add form                form add new AbstractAjaxTimerBehavior Duration milliseconds 1                       Override                 protected void onTimer AjaxRequestTarget target                        download initiate target                                                       Happy downloading

User · Answer

This solution works across browsers  and does not trigger warnings  Rather than creating an iframe  here we creates a link for each file  This prevents warning messages from popping up   To handle the looping part  we use setTimeout  which is necessary for it to work in IE    x000D   x000D      x000D     Download a list of files  x000D      author speedplane x000D      x000D  function download files files    x000D    function download next i    x000D      if  i  gt   files length    x000D        return  x000D        x000D      var a   document createElement  a    x000D      a href   files i  download  x000D      a target     parent   x000D         Use a download if available  it prevents plugins from opening  x000D      if   download  in a    x000D        a download   files i  filename  x000D        x000D         Add a to the doc for click to work  x000D       document body    document documentElement  appendChild a   x000D      if  a click    x000D        a click       The click method is supported by most browsers  x000D        else   x000D          a  click       Backup using jquery x000D        x000D         Delete the temporary link  x000D      a parentNode removeChild a   x000D         Download the next file with a small timeout  The timeout is necessary x000D         for IE  which will otherwise only download the first file  x000D      setTimeout function     x000D        download next i   1   x000D         500   x000D      x000D       Initiate the first download  x000D    download next 0   x000D    x000D   lt script gt  x000D       Here s a live example that downloads three test text files  x000D    function do dl     x000D      download files   x000D          download   http   www nt az reg txt   filename   regs txt     x000D          download   https   www w3 org TR PNG iso 8859-1 txt   filename   standards txt     x000D          download   http   qiime org  static Examples File Formats Example Mapping File txt   filename   example txt     x000D          x000D       x000D   lt  script gt  x000D   lt button onclick  do dl     gt Test downloading 3 text files  lt  button gt  x000D   x000D   x000D

User · Answer

To solve this  I created a JS library to stream multiple files directly into a zip on the client-side  The main unique feature is that it has no size limits from memory  everything is streamed  nor zip format  it uses zip64 if the contents are more than 4GB    Since it doesn t do compression  it is also very performant   Find  downzip  it on npm or github

User · Answer

I agree that a zip file is a neater solution    But if you have to push multiple file  here s the solution I came up with  It works in IE 9 and up  possibly lower version too - I haven t tested it   Firefox  Safari and Chrome  Chrome will display a message to user to obtain his agreement to download multiple files the first time your site use it     function deleteIframe  iframe        iframe remove       function createIFrame  fileURL        var iframe       lt iframe style  display none  gt  lt  iframe gt         iframe 0  src  fileURL         body   append iframe       timeout deleteIframe  60000  iframe                       This function allows to pass parameters to the function in a timeout that are      frozen and that works in IE9  function timeout func  time          var args             if  arguments length  gt 2               args   Array prototype slice call arguments  2                 return setTimeout function    return func apply null  args      time          IE will process only the first one if we put no delay  var wait    isIE   1000   0    for  var i   0  i  lt  files length  i              timeout createIFrame  wait i  files i         The only side effect of this technique  is that user will see a delay between submit and the download dialog showing  To minimize this effect  I suggest you use the technique describe here and on this question Detect when browser receives file download that consist of setting a cookie with your file to know it has started download  You will have to check for this cookie on client side and to send it on server side  Don t forget to set the proper path for your cookie or you might not see it  You will also have to adapt the solution for multiple file download

[http] Download multiple files with a single action

Examples related to http

Examples related to web-applications

Examples related to download