AngularJS directive file upload with progress bar from AngularJS O'Reilly book -
i'm starting angularjs , following book o'reilly, angularjs. in there example of using file upload file upload blueimp.
i can upload files, want show progress bar , can not access element contains during "progress" event.
in declaration of directive have "element" access container element , once there, show div progress bar, progress event have no access "element" (one passed 2 arguments, e & data) during file upload can not show bar. have looked @ many examples used differently i'm doing so, not serve me.
is possible pass "element" function runs on progress event?
ecm_directives.directive('fileupload', function(){ return { restrict: 'a', scope: { done: '&', progress: '&', }, link: function(scope, element, attrs) { var optionsobj = { datatype: 'json' }; if (scope.done) { optionsobj.done = function(e, data) { scope.$apply(function() { scope.done({e: e, data: data}); }); }; } if (scope.progress) { optionsobj.progress = function(e, data) { scope.$apply(function() { scope.progress({e: e, data: data}); }); }; } //the above done in loop, cover //all api's fileupload provides element.fileupload(optionsobj); } } });
and html
<div class="file-input-wrapper"> <div class="progress-bar"> <div class="bar"></div> </div> <button class="btn-file-input ng-binding">subir</button> <input type="file" name="ccedulacandidato" accept=".pdf, image/jpeg, image/png" data-url="/backend/documents/save/" fileupload="" done="uploadfinishedgeneral(e, data)" progress="uploadonprogressgeneral(e, data)" class="ng-isolate-scope ng-scope"> <input type="hidden" ng-model="candidatefiles.cedula.token" name="ccedulacandidatotoken" value="" class="ng-pristine ng-valid"> </div>
and in generalctrl
$scope.uploadonprogressgeneral = function(e, data) { // in point, want show progressbar cant access // parent element input uploaded file elementparent = $(this).parents('.file-wrapper').parent(); progressbar = elementparent.find('.progress-bar'); bar = progressbar.find('.bar'); bar.css('width', parseint(data.loaded / data.total * 100, 10) + '%'); elementparent.removeclass('error').find('.restrictions').hide(); };
Comments
Post a Comment