Angular js, download all files button

Question

I have an array full of urls

{“http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png”,”http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png”,”http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png”}

what I basically want to do is on the click of a button download every file on that array. I am currently using the download property to download them one by one. But I have to implement a ‘download all’ button. Any suggestions?

do you want to use `download all` along with the single download? — Kalhan.Toress, Sep 14 '15 at 15:14
Not entirely a great idea (downloading multiple files without zipping), but try reading through this: http://stackoverflow.com/questions/5353630/how-to-download-multiple-files-in-one-shot-in-ie — Johan, Sep 14 '15 at 15:19
I don't think this is possible in modern browsers without going to something 3rd party like flash. — Kevin B, Sep 14 '15 at 15:22

Ravindra Vairagi · Accepted Answer · 2016-10-11T05:02:21.607

A. To Download multiple files from server URL using files array follow below steps -

Step 1. Convert all files into base64string

var src = ['http://www.example.com/file1.png', 'http://www.example.com/file2.jpeg', 'http://www.example.com/file3.jpg'];

//using canvas to convert image files to base64string
 function convertFilesToBase64String(src, callback, outputFormat) {
            var img = new Image();
            img.setAttribute('crossOrigin', 'anonymous');
            img.onload = function () {
                var canvas = document.createElement('CANVAS');
                var ctx = canvas.getContext('2d');
                var dataURL;
                canvas.height = this.height;
                canvas.width = this.width;
                ctx.drawImage(this, 0, 0);
                dataURL = canvas.toDataURL(outputFormat);
                callback(dataURL);
            };
            img.src = src;
            if (img.complete || img.complete === undefined) {
                img.src = appConfig.config.dummyImage;
                img.src = src;
            }
        }

Step 2. Then download one by one base64string converted images by using below code -

function downloadFile(url, interval) {
            $timeout(function () {
                var a = document.createElement('a');
                document.body.appendChild(a);
                a.download = name;
                a.href = url;
                a.click();
                document.body.removeChild(a);
            }, (interval * 250));
        }

Note - interval is used to give some time interval between multiple file download.

B. To Download multiple files in Zip format we can use jsZip and FileSaver.js or if we are using Web API and Angularjs then we can create an API method to create zip archieve file at server and then in angularjs we can use $http post or get api call to download the file as zip file (We have to use filesaver to save the file in zip format). for example -

api call in angularjs -

function downloadFiles(files) {
            return $http.post(baseUrl + 'api/download/files', files, { responseType: 'arraybuffer' });
        }

call above function and on response use fileSaver.js method saveAs to save file in zip format for example -

//where files => array input of files like [http://www.example.com/file1.png', 'http://www.example.com/file2.jpeg', 'http://www.example.com/file3.jpg'];

    downloadFiles(files).then(function (response) {
        //on success
        var file = new Blob([response.data], { type: 'application/zip' });
        saveAs(file, 'example.zip');
    }, function (error) {
        //on error
        //write your code to handle error
    });

score 1 · Answer 2 · answered Sep 14 '15 at 17:40

ok i created something that does what you want i dont know if that is a right way to do it but it works

Html:

<body ng-app="myApp" ng-controller="myController">
<a id="id"  ng-href="{{button}}" download></a>
<button ng-click="fun();$event.stopPropagation();">Download All</button>
</body>

Script:

angular.module('myApp',[])
.controller("myController",myController)
function myController($scope){
    var a = ["http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png",
            "http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png",
            "http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png"];
    $scope.button ="http://img.viralpatel.net/2013/07/angularjs-routing-view-controller.png" ;

    $scope.fun = function(){                
        angular.forEach(a,function(value,key){          
            document.getElementById('id').click();
            $scope.button = value;                                                                          
        }); 

    }

}

Angular js, download all files button

2 Answers2

Linked