Angularjs - how to add angularjs-file-upload to meanjs library

Question

Am trying to implement danialfarid\'s angularjs-file-upload using meanjs. But it\'s not working.

Is it possible to use it with

Answer 1

You should be able to use it, it looks like you miss a step in including the angularjs-file-upload module into your project, so here's the steps for including this module or any external angular module in MeanJS Application:

1- after installing angularjs-file-upload file upload via bower with the command:

bower install ng-file-upload --save

2- you should add reference the angularjs-file-upload.js files in your application layout page, this is done in the file: config\env\all.js, you should have the lines like this:

assets: {
        lib: {
            css: [
                'public/lib/bootstrap/dist/css/bootstrap.css',
                'public/lib/bootstrap/dist/css/bootstrap-theme.css'               
            ],
            js: [
                'public/lib/ng-file-upload/angular-file-upload-shim.min.js',
                'public/lib/angular/angular.js',
                'public/lib/ng-file-upload/angular-file-upload.min.js',

3- then you should include angularjs-file-upload as a dependency in your angular application, this is done in the file: public\config.js, add 'angularFileUpload' at the end of the array in this line:

var applicationModuleVendorDependencies = ['ngResource', 'ngCookies',  'ngAnimate',  'ngTouch',  'ngSanitize',  'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload'];

4- you should be able to use the file uploader in your view now, if not complete also the next step then try again.

5- if you want to use the angularjs-file-upload service in you controller, you should inject the upload service ($upload) in your module registeration like this:

angular.module('myModuleName').controller('MyController', ['$scope', '$stateParams', '$location', 'Authentication', '$upload',
    function ($scope, $stateParams, $location, Authentication, $upload) {
// your controller code goes here
});

6- now you should be apple to use the $upload service from angularjs-file-upload in your angular controller like this:

 $upload.upload({
                url: '/serverRouteUrl', //upload.php script, node.js route, or servlet url
                method: 'POST', //Post or Put
                headers: {'Content-Type': 'multipart/form-data'},
                //withCredentials: true,
                data: JsonObject, //from data to send along with the file
                file: blob, // or list of files ($files) for html5 only
                //fileName: 'photo' // to modify the name of the file(s)                
            }).success(function (response, status) {
                   //success 
                }
            ).error(function (err) {
                   //error
                }
            );

That will be all from client side, not that you have to configure your server side app or route(s) to be able to handle requests with file uploads, using a library like Multer will do the trick.