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 -

beforeClick

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 - enter image description here but if i open it in new tab request goes to server and it works

Community · Accepted Answer · 2017-05-23 11:53:33Z

2

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

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Jul 9, 2014 at 11:56

Ben Fortune

32.2k10 gold badges82 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Harshit Laddha Over a year ago

I understood that and a temporary work around was to use target=_blank property and give the url there itself, but my main concern is the second part of my question for why the angular(routeProvider) tries to load a template url for a route which is not specified by me and let the request go to server

Ben Fortune Over a year ago

target="_self" may be better. Updated the question.

domokun Over a year ago

Also, JS has no access to the filesystem to store your file.

Harshit Laddha Over a year ago

so, what should i add to the routeProvider configuration so that it simply passes whatever invalid path it received to the server, since here in what you told: /whatever is a static single route and I have more than one route here for the server. thanks for _self too does work

Harshit Laddha Over a year ago

also i tried adding this path - .when('/download/note/:noteId/:fileId',{ redirectTo:'/download/note/:noteId/:fileId' }) to the routeProvider but it too took the app to the page shown in the afterClick and showed me an empty page without any template url

|

Collectives™ on Stack Overflow

downloading files from nodejs using angular at client side

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related