AngularJS and ngDroplet

I have an issues with ngDroplet to upload my files to server using an api request.

Following are my UploadCtrl:

'use strict';
/** 
  * controllers for Angular File Upload
*/
myApp.controller('UploadCtrl', ['$scope', '$timeout','$http',
function ($scope, $timeout,$http) {
   $scope.interface = {};
 /**
         * @property uploadCount
         * @type {Number}
         */
        $scope.uploadCount = 0;

        /**
         * @property success
         * @type {Boolean}
         */
        $scope.success = false;

        /**
         * @property error
         * @type {Boolean}
         */
        $scope.error = false;

        // Listen for when the interface has been configured.
        $scope.$on('$dropletReady', function whenDropletReady() {

            $scope.interface.allowedExtensions(['png', 'jpg', 'bmp', 'gif', 'svg', 'torrent']);
            $scope.interface.setRequestHeaders('/api/upload');
            $scope.interface.setRequestUrl('/api/upload');
            $scope.interface.defineHTTPSuccess([/2.{2}/]);
            $scope.interface.useArray(false);
            // $scope.

            //$scope.interface.sendFile('/api/upload');
            console.log('sending...');

        });

        $scope.$on('$dropletSuccess', function onDropletSuccess(event, response, files) {

            $scope.uploadCount = files.length;
            $scope.success     = true;
            console.log(response, files);

            $timeout(function timeout() {
                $scope.success = false;
            }, 5000);

        });

        // Listen for when the files have failed to upload.
        $scope.$on('$dropletError', function onDropletError(event, response) {

            $scope.error = true;
            console.log(response);

            $timeout(function timeout() {
                $scope.error = false;
            }, 5000);

        });

}]);

My view:

<div class="container-fluid container-fullw" ng-controller="UploadCtrl">
    <div class="row">
        <div class="col-md-6 col-md-offset-2">
                    <h3>Images</h3>
                    <section class="container">
        <section class="droplet" ng-class="{ uploading: interface.isUploading() }">
             <section class="toolbar">

                <input type="button" class="button upload-files" value="Upload Files"
                       ng-click="interface.uploadFiles()"
                       ng-hide="interface.isUploading()"
                       ng-class="{ clickable: interface.isReady() }" />

                <input type="button" class="button upload-files" value="Uploading..." ng-show="interface.isUploading()" />

                <div class="add-files">
                    <input type="button" class="button add-files" value="Add Files..." />
                    <droplet-upload-multiple ng-model="interface"></droplet-upload-multiple>
                </div>

                <comment class="progress" ng-class="{ visible: interface.isUploading() }">
                    Uploaded: {{interface.progress.percent}}%
                </comment>

            </section>
            <droplet ng-model="interface">

                <div class="loading" ng-class="{ visible: interface.isUploading() }">
                    <svg viewBox="0 0 400 400">
                        <path class="loading-path" data-progressbar ng-model="interface.progress.percent"
                              d="M 0,1 L 398,1 L 398,234 L 1,234 L 0,1"
                              stroke="#D3B2D1" stroke-width="1" fill-opacity="0"
                              style="stroke-dasharray: 392px, 392px;stroke-dashoffset: 392px;"></path>
                    </svg>
                </div>

                <comment></comment>

                <section class="message success" ng-class="{ visible: success }" ng-click="success = false">
                    Successfully uploaded {{uploadCount}} files.
                </section>

                <section class="message error" ng-class="{ visible: error }" ng-click="error = false">
                    Failed to upload any of the files.
                </section>

                <ul class="files">

                    <li ng-repeat="model in interface.getFiles(interface.FILE_TYPES.VALID)">
                        <droplet-preview ng-model="model"></droplet-preview>
                        <div class="delete" ng-click="model.deleteFile()">&times;</div>
                        <div class="size">{{model.file.size / 1024 / 1024 | number: 1}}MB</div>
                    </li>

                </ul>
            </droplet>
            </section>
</section>
        </div>
    </div>
</div>

The error I receive from server is TokenMismatchException in VerifyCsrfToken.php. I am using php laravel 5.1 as my server.

This is snapshot of console.

This is the link for the ngDroplet:

[http://ift.tt/1VkwlRb]

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/1GefXFD
via IFTTT