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

Popular posts from this blog

java - Intellij Synchronizing output directories .. -

git - Initial Commit: "fatal: could not create leading directories of ..." -