AngularJS, NodeJS

Upload images using AngularJS and NodeJS

5

This post will show you how to upload images using AngularJS and NodeJS.  In the client-size (AngularJS), we use ngFileUpload plugin. And in the server-side, we use ExpressJS 4.0.

At the first, we create a upload file service in the client-side:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
'use strict';
angular.module('YourApp').factory('Files', function (Upload, $q, APP_CONFIG) {
    return {
        upload: function (files) {
            var deferred = $q.defer();
            var url = APP_CONFIG.services.files.upload;
            files.upload = Upload.upload({
                url: url,
                fields: {
                },
                file: files
            }).success(function (data) {
                deferred.resolve(data);
            }).error(deferred.reject);
            return deferred.promise;
        }
    };
});

And In your Angular Controller, you inject Files service and write the upload function as below:

1
2
3
4
5
6
7
8
9
    $scope.upload = function (files) {
        if (files && files.length) {
            Files.upload(files).then(function (data) {
                console.log('Uploaded successfully');
            }).catch(function(){
                console.log('Upload failed');
            });
        }
    };

In the server side, you need to create a upload API. And the post “How to upload file with NodeJS and ExpressJS” will help you do that

Related Posts

Nguyen Sy Thanh Son

5