.upload is not a function in ng-file-upload

I am using NG-FILE-UPLOAD for file upload,preview and send to server.

I have added the files upload.js and upload.shim.js is my files direcory.added them in project and also added dependency in my angular module.working same as this one.

Html:

 <fieldset> <input type="file" ngf-select="" ng-model="picFile" name="file" accept="image/*" ngf-max-size="2MB" required="" /> <img ngf-thumbnail="picFile" width="300"/> <button ng-click="picFile = null" ng-show="picFile">Remove</button> <br /> <button ng-click="uploadPic(picFile)">Submit</button> <span ng-show="picFile.progress >= 0"> <div ng-bind="picFile.progress + '%'"></div> </span> <span ng-show="picFile.result">Upload Successful</span> <span ng-show="errorMsg">{{errorMsg}}</span> </fieldset> 

Controller:

 $scope.uploadPic = function(file) { Upload.upload({ url: '/student/studentimages', data: { uploadedPicture: file, uploadedFrom: 'recipe' }, }).then(function(response) { $timeout(function() { $scope.result = response.data; }); }, function(response) { if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data; }, function(evt) { $scope.progress = parseInt(100.0 * evt.loaded / evt.total); }); } 

But when i click submit it is giving me error as

Upload.upload is not a function at Scope.e.uploadPic (app.min.js:1) at fn (eval at compile (angular.js:13036), <anonymous>:4:296) at update (upload.js:533) at upload.js:611 at angular.js:17571 at completeOutstandingRequest (angular.js:5370) at angular.js:5642 

I have tried changing version too. What else can be tried to solve this?

1 Answer

It seems like you haven't properly initialized/ injected the dependencies.

In the module:

var app = angular.module('your_module', ['ngFileUpload']); 

In the controller:

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) { $scope.upload = function(dataUrl) { Upload.upload({ url: AppConstants.api.images, data: { uploadedPicture: dataUrl, uploadedFrom: 'recipe' }, }).then(function(response) { $timeout(function() { $scope.result = response.data; }); }, function(response) { if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data; }, function(evt) { $scope.progress = parseInt(100.0 * evt.loaded / evt.total); }); } } 

check this link