Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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

Is it possible to use it with meanjs??

share|improve this question
    
Do you see errors in a console? –  MajoB Sep 14 '14 at 11:24
    
yes. the modules and services from the plugin are not registered from "angular.js". –  Sravani Lanka Sep 19 '14 at 9:24

1 Answer 1

up vote 5 down vote accepted

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.

share|improve this answer
    
Thank u. It was quite helpful. What I initially tried was include js files in server layout... –  Sravani Lanka Nov 28 '14 at 10:25
    
you are welcome, I'm glad I helped :) If it answered your question, why not marking as an answer? :) –  yass Nov 29 '14 at 9:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.