angularjs angular-file-upload Unknown provider: $uploadProvider error

Question

This is not a duplicate of This Question

I have included all the required files in view:

<script src="~/Scripts/angular-file-upload-master/examples/console-sham.min.js"></script>
<script src="~/Content/js/angular.js"></script>
<script src="~/Scripts/angular-file-upload-master/angular-file-upload.js"></script>

My module and controller:

var controllers = angular.module('controllers', ['ngGrid', 'ngDialog', 'angularFileUpload']);

controllers.controller('CustomProductsCtrl', 
 ['$scope', '$window', 'ngDialog', 'CommonService', 
   'CustomProductsServices', '$upload', 
 function ($scope, $window, ngDialog, CommonService, 
   CustomProductsServices, $upload){

});

But still I get this error.

Error: [$injector:unpr] Unknown provider: $uploadProvider

Please help me out.

Answer 1

It appears that you didn't close the controller declaration correctly.

Specifically, you have: }); when you should have }]); instead. Note the missing ].

---

In context, you should have:

var controllers = angular.module('controllers', ['ngGrid', 'ngDialog', 'angularFileUpload']);

controllers.controller('CustomProductsCtrl', 
 ['$scope', '$window', 'ngDialog', 'CommonService', 
   'CustomProductsServices', '$upload', 
 function ($scope, $window, ngDialog, CommonService, 
   CustomProductsServices, $upload){

}]);  // Note: missing ']' added in here

because we need to follow the form of declaring a controller. The controller API is terse, but pretty succint:

$controller(constructor, locals);

Which expanded to your case:

module_name.controller( 'your_Ctrl', 
    [locals, function(){ 
        } 
    ] 
);

I added in extra spacing to call out the missing ] and to show how we're closing off elements within the declaration.

Answer 2

Hit the same issue, turned out that the documentation to inject $upload is out of date, it should be FileUploader:

controllers.controller('CustomProductsCtrl',
  [..., '$upload', function (..., 'FileUploader') {

Spent more time than I'd like to admit figuring that out. FYI, I determined that by looking at angular-file-upload.js:

.factory('FileUploader', ['fileUploaderOptions', '$rootScope', '$http', '$window', '$compile',

Answer 3

It seems this error can be ng-file-upload version dependent:

https://github.com/danialfarid/ng-file-upload/issues/45

If you try the suggestions on that page and this page and still get the error, the following worked for me:

angular.module('starter.controllers', ['ngFileUpload'])
.controller('HomeCtrl', function($scope, ... Upload) {
   ...
   file.upload = Upload.upload({...}); //Upload instead of $upload
   ...
})