Angular js, download all files button

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?

asked Sep 14 '15 at 15:10

Rodrigo Zurek

3,76362539

do you want to use download all along with the single download?

– K.Toress
Sep 14 '15 at 15:14

can you bundle them server side into a zip?

– Johan
Sep 14 '15 at 15:16

is there a non-server side solution?

– Rodrigo Zurek
Sep 14 '15 at 15:17

Not entirely a great idea (downloading multiple files without zipping), but try reading through this: stackoverflow.com/questions/5353630/…

– 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

add a comment |

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”}

asked Sep 14 '15 at 15:10

Rodrigo Zurek

3,76362539

do you want to use download all along with the single download?

– K.Toress
Sep 14 '15 at 15:14

can you bundle them server side into a zip?

– Johan
Sep 14 '15 at 15:16

is there a non-server side solution?

– Rodrigo Zurek
Sep 14 '15 at 15:17

Not entirely a great idea (downloading multiple files without zipping), but try reading through this: stackoverflow.com/questions/5353630/…

– 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

add a comment |

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”}

asked Sep 14 '15 at 15:10

Rodrigo Zurek

3,76362539

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”}

angularjs

asked Sep 14 '15 at 15:10

Rodrigo Zurek

3,76362539

asked Sep 14 '15 at 15:10

Rodrigo Zurek

3,76362539

asked Sep 14 '15 at 15:10

Rodrigo Zurek

3,76362539

asked Sep 14 '15 at 15:10

Rodrigo Zurek

3,76362539

asked Sep 14 '15 at 15:10

Rodrigo Zurek

3,76362539

do you want to use download all along with the single download?

– K.Toress
Sep 14 '15 at 15:14

can you bundle them server side into a zip?

– Johan
Sep 14 '15 at 15:16

is there a non-server side solution?

– Rodrigo Zurek
Sep 14 '15 at 15:17

Not entirely a great idea (downloading multiple files without zipping), but try reading through this: stackoverflow.com/questions/5353630/…

– 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

add a comment |

do you want to use download all along with the single download?

– K.Toress
Sep 14 '15 at 15:14

can you bundle them server side into a zip?

– Johan
Sep 14 '15 at 15:16

is there a non-server side solution?

– Rodrigo Zurek
Sep 14 '15 at 15:17

Not entirely a great idea (downloading multiple files without zipping), but try reading through this: stackoverflow.com/questions/5353630/…

– 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

do you want to use download all along with the single download?

– K.Toress
Sep 14 '15 at 15:14

can you bundle them server side into a zip?

– Johan
Sep 14 '15 at 15:16

is there a non-server side solution?

– Rodrigo Zurek
Sep 14 '15 at 15:17

Not entirely a great idea (downloading multiple files without zipping), but try reading through this: stackoverflow.com/questions/5353630/…

– 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

add a comment |

2 Answers
2

active

oldest

votes

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

    });

edited Oct 11 '16 at 5:02

answered Sep 27 '16 at 5:04

Ravindra Vairagi

376314

add a comment |

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;                                                                          

        }); 



    }



}

answered Sep 14 '15 at 17:40

Mat.

498210

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f32568214%2fangular-js-download-all-files-button%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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.

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

    });

edited Oct 11 '16 at 5:02

answered Sep 27 '16 at 5:04

Ravindra Vairagi

376314

add a comment |

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.

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

    });

edited Oct 11 '16 at 5:02

answered Sep 27 '16 at 5:04

Ravindra Vairagi

376314

add a comment |

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.

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

    });

edited Oct 11 '16 at 5:02

answered Sep 27 '16 at 5:04

Ravindra Vairagi

376314

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.

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

    });

edited Oct 11 '16 at 5:02

answered Sep 27 '16 at 5:04

Ravindra Vairagi

376314

edited Oct 11 '16 at 5:02

answered Sep 27 '16 at 5:04

Ravindra Vairagi

376314

answered Sep 27 '16 at 5:04

Ravindra Vairagi

376314

answered Sep 27 '16 at 5:04

Ravindra Vairagi

376314

add a comment |

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;                                                                          

        }); 



    }



}

answered Sep 14 '15 at 17:40

Mat.

498210

add a comment |

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;                                                                          

        }); 



    }



}

answered Sep 14 '15 at 17:40

Mat.

498210

add a comment |

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;                                                                          

        }); 



    }



}

answered Sep 14 '15 at 17:40

Mat.

498210

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;                                                                          

        }); 



    }



}

answered Sep 14 '15 at 17:40

Mat.

498210

answered Sep 14 '15 at 17:40

Mat.

498210

answered Sep 14 '15 at 17:40

Mat.

498210

answered Sep 14 '15 at 17:40

Mat.

498210

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky