I am looking to display the progress of a file upload using a file reader.
Here is the HTML code snippet I have:
<md-progress-linear id="file-progress-indicator" md-mode="determinate" value="{{progress}}"></md-progress-linear>
and below is my directive implementation:
angular.module('image.directives').directive('edFileUploader', ['$parse', '$mdDialog', '$mdBottomSheet', '$timeout', 'toastr', function($parse, $mdDialog, $mdBottomSheet, $timeout, toastr) {
return {
restrict: 'A',
link: function($scope, el, attrs) {
var setter = $parse(attrs.edFileUploader)($scope);
$(el[0]).on('change', function(e) {
var reader = new FileReader();
if (setter) {
setter(event.target.result, el);
if (typeof attrs.edCloseAfter !== 'undefined') {
$mdBottomSheet.hide();
}
}
};
reader.onprogress = function(data) {
if (data.lengthComputable) {
var progress = parseInt(((data.loaded / data.total) * 100), 10);
// $scope.progress = progress;
}
}
if (e.target.files[0] != undefined) {
reader.readAsDataURL(e.target.files[0]);
$scope.loading = false;
el.next().removeClass('loading');
$scope.done = true;
} else {
$scope.loading = false;
el.next().removeClass('loading');
$scope.done = true;
}
});
}
}
}]);
Any suggestions on how to effectively pass the variable "progress" from the reader.onprogress method in order for the progress bar to function as intended?