Ytukyg

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.

Jacob Relkin 133k24313300 · Accepted Answer · 2010-02-26 04:12:25Z

up vote
43
down vote

accepted

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

answered Feb 26 '10 at 4:12

Jacob Relkin

133k24313300

20

Why is a zip file the preferred solution? It creates an extra step for the user (unzipping).
– speedplane
Apr 13 '15 at 13:26

4

This page contains javascript which creates ZIP file. Look at the page it has a great example. stuk.github.io/jszip
– Netsi1964
Sep 26 '15 at 7:03

A third way is to encapsulate the files into a SVG file. If the files are displayed in the browser, the SVG seems to be the best way.
– VectorVortec
Dec 31 '15 at 9:06

1

HTTP itself supports multipart message format. But browsers don't portably parse multipart responses from the server side, but technically there's nothing difficult with doing this.
– CMCDragonkai
Jul 27 at 4:25

add a comment |

Matěj Pokorný 9,56632137 · Answer 2 · 2015-06-06 12:12:41Z

up vote
68
down vote

var links = [

  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.exe',

  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.dmg',

  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.jar'

];



function downloadAll(urls) {

  var link = document.createElement('a');



  link.setAttribute('download', null);

  link.style.display = 'none';



  document.body.appendChild(link);



  for (var i = 0; i < urls.length; i++) {

    link.setAttribute('href', urls[i]);

    link.click();

  }



  document.body.removeChild(link);

}

<button onclick="downloadAll(window.links)">Test me!</button>

answered Jun 6 '15 at 12:12

Matěj Pokorný

9,56632137

2

Couldn't get it to work
– Steven
Jun 17 '15 at 23:27

1

I am working with many file types, including pictures, and this worked best for me. However, link.setAttribute('download', null); renamed all my files to null.
– tehlivi
Apr 14 '16 at 21:36

3

It does not work in IE 11, it only downloads the .jar (last item in the list) it was the perfect solution :(
– Functional Rocking
May 11 '16 at 13:39

1

@AngeloMoreira Yep, at least it works in Edge. If you try downloading multiple files in IE on MS sites, for example, they spawn multiple pop-up windows, so i think best solution for IE is still from Dmitry Nogin above.
– Matěj Pokorný
May 12 '16 at 13:07

1

@tehlivi - I found the same thing. Add the link.setAttribute('download',filename) inside the loop. This allows you to name the files anything you wish. Also, I believe it needs to be the filename only not including the URL. I ended up sending two arrays: one with the full URL and one with just the filename.
– PhilMDev
Jun 16 '16 at 18:48

|
show 4 more comments

Ben Gotow 12.8k33446 · Answer 3 · 2018-03-30 08:33:33Z

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:

<!DOCTYPE HTML>

<html>

<body>

  <button id="download">Download</button> 



  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  <script type="text/javascript">



     $('#download').click(function() {

       download('http://nogin.info/cv.doc','http://nogin.info/cv.doc');

     });



     var download = function() {

       for(var i=0; i<arguments.length; i++) {

         var iframe = $('<iframe style="visibility: collapse;"></iframe>');

         $('body').append(iframe);

         var content = iframe[0].contentDocument;

         var form = '<form action="' + arguments[i] + '" method="GET"></form>';

         content.write(form);

         $('form', content).submit();

         setTimeout((function(iframe) {

           return function() { 

             iframe.remove(); 

           }

         })(iframe), 2000);

       }

     }      



  </script>

</body>

</html>

Or, without jQuery:

 function download(...urls) {

    urls.forEach(url => {

      let iframe = document.createElement('iframe');

      iframe.style.visibility = 'collapse';

      document.body.append(iframe);



      iframe.contentDocument.write(

        `<form action="${url.replace(/"/g, '"')}" method="GET"></form>`

      );

      iframe.contentDocument.forms[0].submit();



      setTimeout(() => iframe.remove(), 2000);

    });

  }

awesome, but for some reasons the files are not getting downloaded. To me the reason seems that the page reloads after script is executed, seems to be the reason for files not getting downloaded. Any clue on what wrong I am doing? — Feb 26 '13 at 7:43
I've got multiple issues with this solution. In IE since my parent window has changed the document.domain, I have an access denied. There's various post about fixing this, but all feel hacky. In Chrome, user gets prompt a warning message telling the web site tries to donwload multiple files (but a least it works). In Firefox, I get different dowload box but when I click Save, I don't get the save file dialog... — Oct 3 '13 at 14:54
This didn't work for me, because the file dialog "blocks" the other save dialogs to appear. What I did was something slightly hacky - the mousemove action registers only after the file dialog disappears, so I used that - but it's not tested. I will add it as another answer. — Mar 5 '14 at 23:55
Does this work in IE10? I get: Object doesn't support property or method 'write' — Aug 12 '14 at 18:28

score 27 · Answer 4 · 2017-09-26 18:30:41Z

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.

/**

 * Download a list of files.

 * @author speedplane

 */

function download_files(files) {

  function download_next(i) {

    if (i >= files.length) {

      return;

    }

    var a = document.createElement('a');

    a.href = files[i].download;

    a.target = '_parent';

    // Use a.download if available, it prevents plugins from opening.

    if ('download' in a) {

      a.download = files[i].filename;

    }

    // Add a to the doc for click to work.

    (document.body || document.documentElement).appendChild(a);

    if (a.click) {

      a.click(); // The click method is supported by most browsers.

    } else {

      $(a).click(); // Backup using jquery

    }

    // Delete the temporary link.

    a.parentNode.removeChild(a);

    // Download the next file with a small timeout. The timeout is necessary

    // for IE, which will otherwise only download the first file.

    setTimeout(function() {

      download_next(i + 1);

    }, 500);

  }

  // Initiate the first download.

  download_next(0);

}

<script>

  // Here's a live example that downloads three test text files:

  function do_dl() {

    download_files([

      { download: "http://www.nt.az/reg.txt", filename: "regs.txt" },

      { download: "https://www.w3.org/TR/PNG/iso_8859-1.txt", filename: "standards.txt" },

      { download: "http://qiime.org/_static/Examples/File_Formats/Example_Mapping_File.txt", filename: "example.txt" },

    ]);

  };

</script>

<button onclick="do_dl();">Test downloading 3 text files.</button>

This is the only one in here that worked for me, since I have to support IE. Thank you. — Apr 11 '16 at 11:10
This answer is golden. Only one that works in all browsers without a warning message. Specially IE. Brilliant stuff — Jul 29 '16 at 13:56
Perfect! But downloaded filename is UNDEFINED (2) (3) (4)...., how to change? — Aug 28 '17 at 19:32
Not working in Chrome OSX, it asks me to allow multiple download but even if I do, only the first file is downloaded and I heard an amount of "beep" corresponding to the number of files to download left — Sep 26 '17 at 9:29

Thilo 192k77413570 · Answer 5 · 2010-02-26 04:11:59Z

up vote
5
down vote

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?

answered Feb 26 '10 at 4:11

Thilo

192k77413570

1

I realize your answer is from way back in 2010, but a lot of users are browsing with smartphones nowadays, some of which can't open zips by default (a buddy tells me his Samsung S4 Active can't open zips).
– Hydraxan14
Jan 22 '17 at 3:06

add a comment |

Yirmiyahu Fischer 106214 · Answer 6 · 2015-08-18 13:45:26Z

A jQuery version of the iframe answers:

function download(files) {

    $.each(files, function(key, value) {

        $('<iframe></iframe>')

            .hide()

            .attr('src', value)

            .appendTo($('body'))

            .load(function() {

                var that = this;

                setTimeout(function() {

                    $(that).remove();

                }, 100);

            });

    });

}

Each is looking for an array. This will work: download(['http://nogin.info/cv.doc','http://nogin.info/cv.doc']); However, this does not work for downloading image files. — Apr 14 '16 at 19:27

suresh 14814 · Answer 7 · 2016-05-03 08:46:51Z

        <!doctype html>

    <html ng-app='app'>

        <head>

            <title>

            </title>

            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

            <link rel="stylesheet" href="style.css">

        </head>

        <body ng-cloack>        

            <div class="container" ng-controller='FirstCtrl'>           

              <table class="table table-bordered table-downloads">

                <thead>

                  <tr>

                    <th>Select</th>

                    <th>File name</th>

                    <th>Downloads</th>

                  </tr>

                </thead>

                <tbody>

                  <tr ng-repeat = 'tableData in tableDatas'>

                    <td>

                        <div class="checkbox">

                          <input type="checkbox" name="{{tableData.name}}" id="{{tableData.name}}" value="{{tableData.name}}" ng-model= 'tableData.checked' ng-change="selected()">

                        </div>

                    </td>

                    <td>{{tableData.fileName}}</td>

                    <td>

                        <a target="_self" id="download-{{tableData.name}}" ng-href="{{tableData.filePath}}" class="btn btn-success pull-right downloadable" download>download</a>

                    </td>

                  </tr>              

                </tbody>

              </table>

                <a class="btn btn-success pull-right" ng-click='downloadAll()'>download selected</a>



                <p>{{selectedone}}</p>

            </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

            <script src="script.js"></script>

        </body>

    </html>





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

Community♦ 11 · Answer 8 · 2017-05-23 12:26:38Z

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 = $('<iframe style="display:none"></iframe>');

    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 >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 < 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.

Does anyone know if this works in mobile browsers?
– Larpon
Mar 21 '14 at 13:00 — Mar 21 '14 at 13:00

score 1 · Answer 9 · 2014-03-06 00:03:43Z

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.)

<script>

$('#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 = $('<iframe style="visibility: collapse;"></iframe>');

                $('body').append(iframe);

                var content = iframe[0].contentDocument;

                var form = '<form action="' + address + '" method="POST"></form>';

                content.write(form);

                $(form).submit();

                setTimeout(function() {    

                    $(document).one('mousemove', function() { //<--slightly hacky!

                        iframe.remove();

                        pp();

                    });

                },2000);

        }

        prevfun=fun; 

      });

      prevfun();   

}

</script>

user5598894 · Answer 10 · 2015-11-24 09:29:39Z

           <p class="style1">







<a onclick="downloadAll(window.links)">Balance Sheet Year 2014-2015</a>



</p>



<script>

 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 < urls.length; i++) {

    link.setAttribute('href', urls[i]);

    link.click();

  }



  document.body.removeChild(link);

}

</script>

score 0 · Answer 11 · 2015-12-31 08:59:19Z

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.

stritzi 11729 · Answer 12 · 2016-11-23 16:10:01Z

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<?> 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!

score 0 · Answer 13 · 2017-08-19 08:48:01Z

Below code 100% working.

Step 1: Paste below code in index.html file

<!DOCTYPE html>

<html ng-app="ang">



<head>

    <title>Angular Test</title>

    <meta charset="utf-8" />

</head>



<body>

    <div ng-controller="myController">

        <button ng-click="files()">Download All</button>

    </div>



    <script src="angular.min.js"></script>

    <script src="index.js"></script>

</body>



</html>

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.

score 0 · Answer 14 · 2018-07-18 20:58:01Z

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 > 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 && $.inArray(ext, docTypes) > -1) {

                files.unshift(Promise.resolve({ doc: doc, web: false }));

            }

            else if (doc && ($.inArray(ext, webTypes) > -1 || ext.includes('?'))) {

                files.push(Promise.resolve({ doc: doc, web: true }));

            }

        });



        downloadDocs(files);

    });

Ali 11 · Answer 15 · 2018-08-08 14:32:29Z

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 --> 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');

        }



    });

Martijn 1 · Answer 16 · 2018-10-29 17:09:58Z

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.

Jacob Relkin 133k24313300 · Accepted Answer · 2010-02-26 04:12:25Z

up vote
43
down vote

accepted

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

answered Feb 26 '10 at 4:12

Jacob Relkin

133k24313300

20

Why is a zip file the preferred solution? It creates an extra step for the user (unzipping).
– speedplane
Apr 13 '15 at 13:26

4

This page contains javascript which creates ZIP file. Look at the page it has a great example. stuk.github.io/jszip
– Netsi1964
Sep 26 '15 at 7:03

A third way is to encapsulate the files into a SVG file. If the files are displayed in the browser, the SVG seems to be the best way.
– VectorVortec
Dec 31 '15 at 9:06

1

HTTP itself supports multipart message format. But browsers don't portably parse multipart responses from the server side, but technically there's nothing difficult with doing this.
– CMCDragonkai
Jul 27 at 4:25

add a comment |

Matěj Pokorný 9,56632137 · Answer 18 · 2015-06-06 12:12:41Z

up vote
68
down vote

var links = [

  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.exe',

  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.dmg',

  'https://s3.amazonaws.com/Minecraft.Download/launcher/Minecraft.jar'

];



function downloadAll(urls) {

  var link = document.createElement('a');



  link.setAttribute('download', null);

  link.style.display = 'none';



  document.body.appendChild(link);



  for (var i = 0; i < urls.length; i++) {

    link.setAttribute('href', urls[i]);

    link.click();

  }



  document.body.removeChild(link);

}

<button onclick="downloadAll(window.links)">Test me!</button>

answered Jun 6 '15 at 12:12

Matěj Pokorný

9,56632137

2

Couldn't get it to work
– Steven
Jun 17 '15 at 23:27

1

I am working with many file types, including pictures, and this worked best for me. However, link.setAttribute('download', null); renamed all my files to null.
– tehlivi
Apr 14 '16 at 21:36

3

It does not work in IE 11, it only downloads the .jar (last item in the list) it was the perfect solution :(
– Functional Rocking
May 11 '16 at 13:39

1

@AngeloMoreira Yep, at least it works in Edge. If you try downloading multiple files in IE on MS sites, for example, they spawn multiple pop-up windows, so i think best solution for IE is still from Dmitry Nogin above.
– Matěj Pokorný
May 12 '16 at 13:07

1

@tehlivi - I found the same thing. Add the link.setAttribute('download',filename) inside the loop. This allows you to name the files anything you wish. Also, I believe it needs to be the filename only not including the URL. I ended up sending two arrays: one with the full URL and one with just the filename.
– PhilMDev
Jun 16 '16 at 18:48

|
show 4 more comments

Ben Gotow 12.8k33446 · Answer 19 · 2018-03-30 08:33:33Z

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:

<!DOCTYPE HTML>

<html>

<body>

  <button id="download">Download</button> 



  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  <script type="text/javascript">



     $('#download').click(function() {

       download('http://nogin.info/cv.doc','http://nogin.info/cv.doc');

     });



     var download = function() {

       for(var i=0; i<arguments.length; i++) {

         var iframe = $('<iframe style="visibility: collapse;"></iframe>');

         $('body').append(iframe);

         var content = iframe[0].contentDocument;

         var form = '<form action="' + arguments[i] + '" method="GET"></form>';

         content.write(form);

         $('form', content).submit();

         setTimeout((function(iframe) {

           return function() { 

             iframe.remove(); 

           }

         })(iframe), 2000);

       }

     }      



  </script>

</body>

</html>

Or, without jQuery:

 function download(...urls) {

    urls.forEach(url => {

      let iframe = document.createElement('iframe');

      iframe.style.visibility = 'collapse';

      document.body.append(iframe);



      iframe.contentDocument.write(

        `<form action="${url.replace(/"/g, '"')}" method="GET"></form>`

      );

      iframe.contentDocument.forms[0].submit();



      setTimeout(() => iframe.remove(), 2000);

    });

  }

awesome, but for some reasons the files are not getting downloaded. To me the reason seems that the page reloads after script is executed, seems to be the reason for files not getting downloaded. Any clue on what wrong I am doing? — Feb 26 '13 at 7:43
I've got multiple issues with this solution. In IE since my parent window has changed the document.domain, I have an access denied. There's various post about fixing this, but all feel hacky. In Chrome, user gets prompt a warning message telling the web site tries to donwload multiple files (but a least it works). In Firefox, I get different dowload box but when I click Save, I don't get the save file dialog... — Oct 3 '13 at 14:54
This didn't work for me, because the file dialog "blocks" the other save dialogs to appear. What I did was something slightly hacky - the mousemove action registers only after the file dialog disappears, so I used that - but it's not tested. I will add it as another answer. — Mar 5 '14 at 23:55
Does this work in IE10? I get: Object doesn't support property or method 'write' — Aug 12 '14 at 18:28

score 27 · Answer 20 · 2017-09-26 18:30:41Z

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.

/**

 * Download a list of files.

 * @author speedplane

 */

function download_files(files) {

  function download_next(i) {

    if (i >= files.length) {

      return;

    }

    var a = document.createElement('a');

    a.href = files[i].download;

    a.target = '_parent';

    // Use a.download if available, it prevents plugins from opening.

    if ('download' in a) {

      a.download = files[i].filename;

    }

    // Add a to the doc for click to work.

    (document.body || document.documentElement).appendChild(a);

    if (a.click) {

      a.click(); // The click method is supported by most browsers.

    } else {

      $(a).click(); // Backup using jquery

    }

    // Delete the temporary link.

    a.parentNode.removeChild(a);

    // Download the next file with a small timeout. The timeout is necessary

    // for IE, which will otherwise only download the first file.

    setTimeout(function() {

      download_next(i + 1);

    }, 500);

  }

  // Initiate the first download.

  download_next(0);

}

<script>

  // Here's a live example that downloads three test text files:

  function do_dl() {

    download_files([

      { download: "http://www.nt.az/reg.txt", filename: "regs.txt" },

      { download: "https://www.w3.org/TR/PNG/iso_8859-1.txt", filename: "standards.txt" },

      { download: "http://qiime.org/_static/Examples/File_Formats/Example_Mapping_File.txt", filename: "example.txt" },

    ]);

  };

</script>

<button onclick="do_dl();">Test downloading 3 text files.</button>

This is the only one in here that worked for me, since I have to support IE. Thank you. — Apr 11 '16 at 11:10
This answer is golden. Only one that works in all browsers without a warning message. Specially IE. Brilliant stuff — Jul 29 '16 at 13:56
Perfect! But downloaded filename is UNDEFINED (2) (3) (4)...., how to change? — Aug 28 '17 at 19:32
Not working in Chrome OSX, it asks me to allow multiple download but even if I do, only the first file is downloaded and I heard an amount of "beep" corresponding to the number of files to download left — Sep 26 '17 at 9:29

Thilo 192k77413570 · Answer 21 · 2010-02-26 04:11:59Z

up vote
5
down vote

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?

answered Feb 26 '10 at 4:11

Thilo

192k77413570

1

I realize your answer is from way back in 2010, but a lot of users are browsing with smartphones nowadays, some of which can't open zips by default (a buddy tells me his Samsung S4 Active can't open zips).
– Hydraxan14
Jan 22 '17 at 3:06

add a comment |

Yirmiyahu Fischer 106214 · Answer 22 · 2015-08-18 13:45:26Z

A jQuery version of the iframe answers:

function download(files) {

    $.each(files, function(key, value) {

        $('<iframe></iframe>')

            .hide()

            .attr('src', value)

            .appendTo($('body'))

            .load(function() {

                var that = this;

                setTimeout(function() {

                    $(that).remove();

                }, 100);

            });

    });

}

Each is looking for an array. This will work: download(['http://nogin.info/cv.doc','http://nogin.info/cv.doc']); However, this does not work for downloading image files. — Apr 14 '16 at 19:27

suresh 14814 · Answer 23 · 2016-05-03 08:46:51Z

        <!doctype html>

    <html ng-app='app'>

        <head>

            <title>

            </title>

            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

            <link rel="stylesheet" href="style.css">

        </head>

        <body ng-cloack>        

            <div class="container" ng-controller='FirstCtrl'>           

              <table class="table table-bordered table-downloads">

                <thead>

                  <tr>

                    <th>Select</th>

                    <th>File name</th>

                    <th>Downloads</th>

                  </tr>

                </thead>

                <tbody>

                  <tr ng-repeat = 'tableData in tableDatas'>

                    <td>

                        <div class="checkbox">

                          <input type="checkbox" name="{{tableData.name}}" id="{{tableData.name}}" value="{{tableData.name}}" ng-model= 'tableData.checked' ng-change="selected()">

                        </div>

                    </td>

                    <td>{{tableData.fileName}}</td>

                    <td>

                        <a target="_self" id="download-{{tableData.name}}" ng-href="{{tableData.filePath}}" class="btn btn-success pull-right downloadable" download>download</a>

                    </td>

                  </tr>              

                </tbody>

              </table>

                <a class="btn btn-success pull-right" ng-click='downloadAll()'>download selected</a>



                <p>{{selectedone}}</p>

            </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

            <script src="script.js"></script>

        </body>

    </html>





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

Community♦ 11 · Answer 24 · 2017-05-23 12:26:38Z

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 = $('<iframe style="display:none"></iframe>');

    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 >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 < 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.

Does anyone know if this works in mobile browsers?
– Larpon
Mar 21 '14 at 13:00 — Mar 21 '14 at 13:00

score 1 · Answer 25 · 2014-03-06 00:03:43Z

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.)

<script>

$('#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 = $('<iframe style="visibility: collapse;"></iframe>');

                $('body').append(iframe);

                var content = iframe[0].contentDocument;

                var form = '<form action="' + address + '" method="POST"></form>';

                content.write(form);

                $(form).submit();

                setTimeout(function() {    

                    $(document).one('mousemove', function() { //<--slightly hacky!

                        iframe.remove();

                        pp();

                    });

                },2000);

        }

        prevfun=fun; 

      });

      prevfun();   

}

</script>

user5598894 · Answer 26 · 2015-11-24 09:29:39Z

           <p class="style1">







<a onclick="downloadAll(window.links)">Balance Sheet Year 2014-2015</a>



</p>



<script>

 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 < urls.length; i++) {

    link.setAttribute('href', urls[i]);

    link.click();

  }



  document.body.removeChild(link);

}

</script>

score 0 · Answer 27 · 2015-12-31 08:59:19Z

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.

stritzi 11729 · Answer 28 · 2016-11-23 16:10:01Z

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<?> 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!

score 0 · Answer 29 · 2017-08-19 08:48:01Z

Below code 100% working.

Step 1: Paste below code in index.html file

<!DOCTYPE html>

<html ng-app="ang">



<head>

    <title>Angular Test</title>

    <meta charset="utf-8" />

</head>



<body>

    <div ng-controller="myController">

        <button ng-click="files()">Download All</button>

    </div>



    <script src="angular.min.js"></script>

    <script src="index.js"></script>

</body>



</html>

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.

score 0 · Answer 30 · 2018-07-18 20:58:01Z

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 > 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 && $.inArray(ext, docTypes) > -1) {

                files.unshift(Promise.resolve({ doc: doc, web: false }));

            }

            else if (doc && ($.inArray(ext, webTypes) > -1 || ext.includes('?'))) {

                files.push(Promise.resolve({ doc: doc, web: true }));

            }

        });



        downloadDocs(files);

    });

Ali 11 · Answer 31 · 2018-08-08 14:32:29Z

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 --> 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');

        }



    });

Martijn 1 · Answer 32 · 2018-10-29 17:09:58Z

搜尋此網誌

Ytukyg

Download multiple files with a single action

16 Answers
16

Your Answer

Post as a guest

16 Answers
16

16 Answers
16

Post as a guest

Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen

Download multiple files with a single action

16 Answers 16

Your Answer

Sign up or log in

Post as a guest

Post as a guest

16 Answers 16

16 Answers 16

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen

16 Answers
16

16 Answers
16

16 Answers
16