Rodrigo Zurek Rodrigo Zurek - 1 month ago 32
AngularJS Question

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?

Answer

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
    });
Comments