downloading files from nodejs using angular at client side

Question

I have a simple angular app which has configuration like -

angular.module('app',['ngResource','ngRoute','ui.bootstrap','angularFileUpload']);

angular.module('app').config(function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);        
    $routeProvider
        .when('/', { templateUrl: '/partials/main/main', controller: 'mainCtrl'})
        .when('/browse/notes', { templateUrl: '/partials/notes/browseNotes',
            controller: 'browseNotesCtrl'
        })
        .when('/upload/notes', { templateUrl: '/partials/notes/uploadNotes',
            controller: 'uploadNotesCtrl'
        })
        .when('/profile',{ templateUrl:'/partials/account/mvProfile',
            controller: 'mvProfileCtrl' 
        }).when('/browse/notes/:noteId',{ templateUrl:'/partials/notes/noteDetail',
            controller: 'mvNoteDetailsCtrl' 
        });
});

Now, my noteDetail partial has content -

ol
    li(ng-repeat="n in range(note.actualFileName.length)")
    a(ng-click="download(n)") {{note.actualFileName[n]}}

and controller has code -

$scope.download = function(n){
        console.log(n);
        var downloadUrl = '/download/note/' + $scope.note.noteId + '/' + $scope.note.storedFileName[n];
        $http({method:'GET',url:downloadUrl}).success(function(data,status,headers,config){
            console.log(status);
            console.log(data);
        });
    }

and my server side route configuration in nodejs is as follows -

app.get('/download/note/:noteid/:fileid',notes.download);

and notes.download has

exports.download = function(req,res) {
    console.log("here");
    console.log(req.params.noteid);
    console.log(req.params.fileid);
    res.status(200);
    var filepath = path.normalize(__dirname + '/../../');
    filepath += 'server/uploads/' + req.params.fileid;
    console.log(filepath);
    res.download(filepath,'server.pdf');
};

now the problem here is if i open some url like -

http://localhost:5000/download/note/9281a9d1-1b51-4e1b-9102-2b422cb2a111/e3ec261b-4722-4a69-ada6-68f88e2ff3db.pdf

directly in the browser it downloads the new file but if i open it from the $http obviously it logs the encrypted binary data into the console, instead of downloading it. So, how do i achieve this?

and also, even if i create an anchor tag with something like -

and then after i click it opens an page without any template ( as i don't have any template defined for this route in my routeProvider configuration, indicating that the route passes through the routeProvider which does not forward it to the server, i feel ) here is what i see after clicking on attachment - but if i open it in new tab request goes to server and it works

Answer 1

You can't save files using ajax, unless you're willing to rebuild the file on the client's side using blobs. See here.

Just use something like

$location.url('/download/note/' + $scope.note.noteId + '/' + $scope.note.storedFileName[n]);

As for the second part, your routeProvider doesn't know what to do when the path is invalid. Add

$routeProvider
    .when('/', {
        templateUrl: '/partials/main/main',
        controller: 'mainCtrl'
    })
    .when('/browse/notes', {
        templateUrl: '/partials/notes/browseNotes',
        controller: 'browseNotesCtrl'
    })
    .when('/upload/notes', {
        templateUrl: '/partials/notes/uploadNotes',
        controller: 'uploadNotesCtrl'
    })
    .when('/profile', {
        templateUrl: '/partials/account/mvProfile',
        controller: 'mvProfileCtrl'
    })
    .when('/browse/notes/:noteId', {
        templateUrl: '/partials/notes/noteDetail',
        controller: 'mvNoteDetailsCtrl'
    })
    .otherwise({
        redirectTo: '/wherever'
    });