CODEWITHSUNDEEP
angularjsfile-upload
Shan Peiris
Shan Peiris

Reputation: 183

setting up angularjs uploader get this error - Unknown provider: $uploadProvider <- $upload

angular.js:13920 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24uploadProvider%20%3C-%20%24upload%20%3C-%20MainController
at http://localhost:8080/libs/angular/angular.min.js:6:412
at http://localhost:8080/libs/angular/angular.min.js:43:174
at Object.d [as get] (http://localhost:8080/libs/angular/angular.min.js:40:432)
at http://localhost:8080/libs/angular/angular.min.js:43:236
at d (http://localhost:8080/libs/angular/angular.min.js:40:432)
at e (http://localhost:8080/libs/angular/angular.min.js:41:158)
at Object.instantiate (http://localhost:8080/libs/angular/angular.min.js:42:24)
at http://localhost:8080/libs/angular/angular.min.js:90:32
at Object.link (http://localhost:8080/libs/angular-route/angular-route.js:1054:26)
at http://localhost:8080/libs/angular/angular.min.js:16:71 <div ng-view="" class="ng-scope">


angular.module('MainController', []).controller('MainController', function($scope,$upload) {

$scope.uploadFile = function (file) {
        $Upload.upload({
            url: '/api/upload',
            data: $scope.file
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };
});
<div ng-controller="MainController">
  <div>
 Upload File:
 <form>
   <input type="file" ng-file-select="fileSelected($files)" >
   <input type="submit" ng-click="uploadFile()" >
 </form>
</div>
</div>

app.js

angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainController', 'EventController','EventService','angularFileUpload','ngFileUpload']);

I wanted to upload a selected file by angular front end to the Nodejs Backend.and then in NodeJs it reads the file and save in MongoDB. can anyone specify the mistake I have done here

Upvotes: 1

Views: 151

Answers (1)

tanmay
tanmay

Reputation: 7911

According to ng-file-upload docs, it's Upload not $upload that you should be injecting in the controller. So, it would be something like,

angular
  .module('MainController', [])
  .controller('MainController', function($scope, Upload) {

    $scope.uploadFile = function (file) {
        Upload.upload({
            url: '/api/upload',
            data: $scope.file
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };
});

This would help you get rid of the error you mentioned on the top.

Upvotes: 1

Related Questions