Угловая: Невозможно прочитать свойство 'picture' of undefined

Question

Я пытаюсь загрузить изображение через filestack на мой mongodb, но я, кажется, получаю сообщение об ошибке при размещении blob внутри моей области видимости (говорит, что он неопределен), но я могу " Кажется, он выясняет, почему он это делает.

Я установил filepicker-угловатый сделать пользовательскую кнопку, вот ссылка на GitHub: https://github.com/filepicker/filepicker-angular

загрузка происходит нормально, это ошибка, я получаю, хотя:

Как вы можете видеть, filepicker загружает изображение, но он не получает хранится внутри $ рамки, которые я выбрал:

{"url":"https://cdn.filepicker.io/api/file/2slhA5RSPmaF1UMmQy1E","filename":"bird.png", 
"mimetype":"image/png","size":159104,"id":1,"client":"computer","isWriteable":true} 

captureCtrl.js:20 

Uncaught TypeError: Cannot read property 'picture' of undefined 
(anonymous function) @ captureCtrl.js:20 
onSuccessMark @ filepicker.js:770 
handler @ filepicker.js:644 
run @ filepicker.js:343 
base.(anonymous function) @ filepicker.js:19 
communicationsHandler @ filepicker.js:94 

Вот мой код:

-capture.html:

<form class="well" name="addCapture"> 
    <div class="form-group"> 
     <label for="picture">Upload your capture:</label> 
     <div class="text-center"> 
      <button type="button" class="btn btn-default" ng-click="upload()"> 
       Upload <span class="caret"></span> 
      </button> 
      <div style="margin-top:10px;"> 
       <!-- Show the thumbnail only when the picture is uploaded --> 
       <a href="{{capture.picture.url}}" class="thumbnail" ng-if="capture.picture"> 
       <!-- the picture is rendered with width: 500 and sharpened --> 
       <img ng-src="{{capture.picture.url | fpConvert: {filter:'sharpen'} }}"> 
       </a> 
      </div>     
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="birdname">Birdname</label> 
     <input type="text" class="form-control" id="birdname" ng-model="birdname" required> 
    </div> 
    <div class="form-group move-down"> 
     <label for="place">Picture taken in:</label> 
     <input type="text" class="form-control" id="place" ng-model="place" ng-autocomplete required> 
    </div> 
    <div class="form-group"> 
     <button type="submit" class="btn margin-left btn-success" ng-click="addToDatabase()" ng-disabled="addCapture.$invalid">Add Customer</button> 
    </div> 
</form> 

-captureCtrl.js

app.controller('captureCtrl',[ '$scope', 'captureApi', 'auth', '$http', '$timeout', 'filepickerService', 
    function($scope, captureApi, auth, $http, $timeout, filepickerService){ 

     $scope.form = {}; 
     $scope.auth = auth; 


     $scope.upload = function(){ 
      filepickerService.pick(
       { 
        mimetype: 'image/*', 
        language: 'en', 
        services: ['COMPUTER','DROPBOX','GOOGLE_DRIVE', 'FACEBOOK', 'INSTAGRAM'], 
        openTo: 'COMPUTER' 
       }, 
       function(Blob){ 
        console.log(JSON.stringify(Blob)); 
        $scope.capture.picture = Blob; 
        $scope.$apply(); 
       } 
      ); 
     }; 


     $scope.addToDatabase = function(){  
      $scope.form = {}; 
      var dataObj = { 
        birdname: $scope.birdname, 
        place : $scope.place, 
        userId : $scope.auth.profile.user_id, 
        author : $scope.auth.profile.name, 
        picture: $scope.capture.picture.url 
      }; 

      $scope.captureMessage = true; 

      captureApi.insertCapture(dataObj) 

      $scope.birdname = ""; 
      $scope.place = ""; 
      $timeout(function() { 
       $scope.captureMessage = false; 
      }, 3000); 
     }; 
    }]); 

Answer 1

Проблема заключается в том, вы не определили объект на $scope имени capture. Все, что вам нужно - это объект с именем capture, связанный с вашим scope. Так же, как я определил в вашей функции upload. $scope.capture = {};:

app.controller('captureCtrl',[ '$scope', 'captureApi', 'auth', '$http', '$timeout', 'filepickerService', 
function($scope, captureApi, auth, $http, $timeout, filepickerService){ 

    $scope.form = {}; 
    $scope.auth = auth; 


    $scope.upload = function(){ 
     filepickerService.pick(
      { 
       mimetype: 'image/*', 
       language: 'en', 
       services: ['COMPUTER','DROPBOX','GOOGLE_DRIVE', 'FACEBOOK', 'INSTAGRAM'], 
       openTo: 'COMPUTER' 
      }, 
      function(Blob){ 
       console.log(JSON.stringify(Blob)); 
       $scope.capture = {}; 
       $scope.capture.picture = Blob; 
       $scope.$apply(); 
      } 
     ); 
    }; 


    $scope.addToDatabase = function(){  
     $scope.form = {}; 
     var dataObj = { 
       birdname: $scope.birdname, 
       place : $scope.place, 
       userId : $scope.auth.profile.user_id, 
       author : $scope.auth.profile.name, 
       picture: $scope.capture.picture.url 
     }; 

     $scope.captureMessage = true; 

     captureApi.insertCapture(dataObj) 

     $scope.birdname = ""; 
     $scope.place = ""; 
     $timeout(function() { 
      $scope.captureMessage = false; 
     }, 3000); 
    }; 
}]);