I want to add a new dependency, the 'angular-file-upload' dependency, but what ever I do, my app crashes, I can't understand how it works. What I've got now is:

in app.js

var myApp = angular.module('myApp', ['ui.bootstrap']);

in appController.js

myApp.controller('appCtrl', ['$scope', function ($scope) {

I've got all necessary resource files (angular-file-upload.js) and references to them, I just don't know how to properly inject the new dependency. I'm thinking I only need to edit the two provided lines, or do I have to create a whole new controller, and if so, what should that look like?

It says that my question is a possible duplicate of another, but on the other question it's about injecting dependencies into config() modules, this is not the case here.

I want to add a new dependency, the 'angular-file-upload' dependency, but what ever I do, my app crashes, I can't understand how it works. What I've got now is:

in app.js

var myApp = angular.module('myApp', ['ui.bootstrap']);

in appController.js

myApp.controller('appCtrl', ['$scope', function ($scope) {

I've got all necessary resource files (angular-file-upload.js) and references to them, I just don't know how to properly inject the new dependency. I'm thinking I only need to edit the two provided lines, or do I have to create a whole new controller, and if so, what should that look like?

It says that my question is a possible duplicate of another, but on the other question it's about injecting dependencies into config() modules, this is not the case here.

• javascript
• angularjs

• 1 You didn't specify new dependency. – dfsq Commented Jul 15, 2015 at 12:02
• stackoverflow./questions/18875714/… – Mohammad Faizan khan Commented Jul 15, 2015 at 12:04

7 Answers 7

Assuming you mean this project: https://github./danialfarid/ng-file-upload
then the snytax is like this:

var myApp = angular.module('myApp', ['ui.bootstrap', 'angularFileUpload']);

myApp.controller('appCtrl', ['$scope', 'FileUploader', function ($scope, FileUploader) {
}]);

The example below describes how to inject the stuff you would like to use. It is from here

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
                                    ^^^^^^^^                    ^^^^^^
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
    });

    $scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                Upload.upload({
                    url: 'upload/url',
                    fields: {'username': $scope.username},
                    file: file
                }).progress(function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
                }).success(function (data, status, headers, config) {
                    console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                }).error(function (data, status, headers, config) {
                    console.log('error status: ' + status);
                })
            }
        }
    };
}]);

Add the dependency to the Angular instance

var myApp = angular.module('myApp', ['ui.bootstrap', 'angularFileUpload']);

And add into your controller:

myApp.controller('appCtrl', ['$scope', 'FileUploader', function($scope, FileUploader) {

See the example on their Git page https://github./nervgh/angular-file-upload/blob/master/examples/simple/controllers.js

You need following ways.

If you have FileUploader.js file

• track the files to your main html page after angular.js script before main.js(app.js)

• Then configure it by this way

  var myApp = angular.module('myApp', ['ui.bootstrap', 'fileUpload']); myApp.controller('appCtrl', ['$scope', 'fileUpload', function ($scope, fileUpload) {
// Your code }]);

If you have any doubt, please see this discussion :- Injecting Dependencies in config() modules - AngularJS

From the angular-file-upload wiki:

• Add the dependency in your module declaration, these will be all the angular modules your application needs.

var myApp = angular.module('myApp', ['ui.bootstrap', 'angularFileUpload']);

• To use its ponents in your controller you'll have also to inject FileUploader so you can access its API.

myApp.controller('appCtrl', ['$scope', 'FileUploader', function ($scope, FileUploader) {

You should write it like following:

var myApp = angular.module('myApp', ['ui.bootstrap', 'angular-file-upload']);

That's it. The dependence module should work fine.

You have to add the file to your angular.module:

var myApp = angular.module('myApp', ['ui.bootstrap', 'angular-file-upload']);

And import the file (for example in your index.html):

<script src="yourpath/ui-bootstrap-tpls.js"></script>
<script src="yourpath/angular-file-upload.js"></script>

If you correctly install your dependency, it should works :)