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

I am trying to implement danialfarid angularjs-file-upload using meanjs . But it doesn't work.

Can you use it with an average?


source to share

1 answer

You can use it, it looks like you missed a step that the project included a load module in the angularjs file, so here are the steps to include that module or any angular external module in your MeanJS app:

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

bower install ng-file-upload --save


2- you must add link to angularjs-file-upload.js files in app layout page, this is done in file: config \ env \ all.js , you must have lines like this:

assets: {
        lib: {
            css: [
            js: [


3- then you must include angularjs-file-upload as a dependency in your angular app, this is done in file: public \ config.js , add 'angularFileUpload' to the end of the array on 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 loader in your view now, if you don't complete the next step as well, try again.

5, if you want to use angularjs-file-upload service in your controller, you must add upload service ( $ upload ) to your module registration like this:

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


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

                url: '/serverRouteUrl', //upload.PHP , 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) {
            ).error(function (err) {


This will be all from the client side, not for you to set up an application or route on the server side to be able to handle file upload requests using a library like Multer will do the trick.



All Articles