Angular: Cannot read property 'picture' of undefined

Question

I'm attempting to upload a picture through filestack onto my mongodb but I seem to be getting an error when putting the blob inside my scope (says it's undefined) but I can't seem to figure out why it's doing this.

I installed filepicker-angular to make a custom button, here's the github link: https://github.com/filepicker/filepicker-angular

The uploading is going fine, this is the error I'm getting though:

As you can see, filepicker uploads the image but it doesn't get stored inside the $scope that I chose:

{"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

Here's my code:

-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

The problem is, you have not defined an Object on $scope named capture. All you need is an Object named capture binded to your scope. Just like I've defined in your upload function. $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);
    };
}]);