Downloading multiple files using AngularJS and storing in path

Question

I am new to Angular,I have a scenario, where I need to download multiple files at the same time. My files are stored in GridFS. I am able to download the files, but for example a pdf is blank. The contentType stored in gridFS is "contentType": "binary/octet-stream", Am I missing out on anything?

My Jade code is

 tr(ng-repeat='row in displayedCollection')
                        td {{ row.Name}}
                        td {{ row.email}}
                        td
                            button.btn.btn-info(type='button',ng-click="downloadDocuments(row.documentsSubmitted)" download) Download Documents

My controller code is

   $scope.downloadDocuments = function (row) {
    angular.forEach(row, function (value, key) {
        var fileToDownload = value.id + "," + 'TrainingPartnerAddingTrainingCenter';

        $http.get('/downloadDocuments/' + fileToDownload).success(function (result, status, headers, config) {
            var _contentType = (headers('Content-Type'));
            var _fileName = headers('FileName');
            var blob = new Blob([ result ], { type : _contentType });
            var url = (window.URL || window.webkitURL).createObjectURL(blob);
            var anchor = angular.element('<a/>');
            anchor.attr({
                href : url,
                target : '_blank',
                download : _fileName
            })[0].click();
        });
    });
};

my node.js code is as follows

exports.downloadDocument = function (req, res) {
var paramData = req.params.fileToDownload.split(',');
var role = req.session.user.role;
var conn = mongoose.connection;
var gfs = Grid(conn.db, mongoose.mongo);
routesLogger.logInfo(role, "downloadDocument", "START");
gfs.findOne({_id: paramData[0], root: paramData[1]}, function (err, file) {
    if (err) {
        routesLogger.logError(role, "downloadDocument", err);
        return res.status(400).send(err);
    }
    else if (!file) {
        routesLogger.logError(role, "downloadDocument", "No File Found for download");
        return res.status(404).send('Error on the database looking for the file.');
    }
    else {
        res.set('Content-Type', file.contentType);
        res.set('Content-Disposition', 'attachment; filename="' + file.filename + '"');

        var readstream = gfs.createReadStream({
            _id: paramData[0],
            root: paramData[1]
        });

        readstream.on("error", function (err) {
            routesLogger.logError(role, "downloadDocument", err);
            res.end();
        });
        readstream.pipe(res);
        routesLogger.logInfo(role, "downloadDocument", "END");
    }
});

};

the contentType stored in gridFS is "application/pdf'. The pdf still comes blank — Rahul Ganguly, Mar 10 '16 at 06:12

score 0 · Accepted Answer · edited May 23 '17 at 10:30

So the mistake I was doing was not adding the parameter { responseType: 'arraybuffer' }. I found the answer in this link

AngularJS: Display blob (.pdf) in an angular app

 $http.get('/downloadDocuments/' + fileToDownload,{ responseType: 'arraybuffer' }).success(function (result, status, headers, config) {
            console.log(headers('Content-Type'));
            var _contentType = (headers('Content-Type'));
            var _fileName = headers('FileName');
            var blob = new Blob([result], {type: _contentType });
            saveAs(blob, _fileName);

Downloading multiple files using AngularJS and storing in path

1 Answers1