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()">×</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]
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire