I need to implement a directive that allows file uploading directly to the browser
angular.module('angularPrototypeApp')
.directive('upload', ['$parse', function ($parse) {
return {
restrict: 'A',
scope: false,
link: function(scope, ele, attrs) {
var fn = $parse(attrs.upload);
ele.on('change', function(onChangeEvent){
var reader = new FileReader();
reader.onload = function(onLoadEvent) {
scope.$apply(function(){
fn(scope, {$fileContents: onLoadEvent.target.result} );
});
}
reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
})
}
};
}]);
The code snippet is sourced from:
The corresponding view appears as follows:
<progressbar class="progress-striped active" value="dynamic" </progressbar>
<input type="file" upload="parseInputFile($fileContents)">
In the controller, the following actions are taken:
angular.module('angularPrototypeApp')
.controller('Gc2xlsxCtrl', ['$scope', 'blockUI', function ($scope, $timeout, blockUI) {
$scope.dynamic = 0;
$scope.parseInputFile = function($fileContents){
$scope.$broadcast('fileUploaded', $fileContents);
}
$scope.$on('fileUploaded', function(event, fileContents) {
if(fileContents !== undefined){
blockUI.start();
//Significant processing takes place here, lasting between 2 and 20 seconds
for(var i = 1; i <= 100; i++){
$scope.dynamic += 1;
}
blockUI.stop();
}
});
}]);
The issue lies in the fact that the updates to $scope.dynamic do not reflect on the view until the entire method has completed execution. The same applies to blockUI. Despite being called at the beginning of the method, the view does not update accordingly. Any assistance on resolving this matter would be greatly appreciated!