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

Question

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

tanmay · Accepted Answer · 2017-04-26 07:58:52Z

1

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.

answered Apr 26, 2017 at 7:58

tanmay

7,9112 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shan Peiris Over a year ago

Thanks tanmay. with this i got some more errors like metionanig the url in the controller. "POST localhost:8080/api/upload 500 (Internal Server Error)"..sholud i make another Question for that?or can help me here

tanmay Over a year ago

@Shan glad it helped. please upvote the answer too. Also, you can ask seperate question for other errors. If you want, send me new question's link here.. I would try to solve

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related