javascript - How to get file selection complete event in angularJS -

currently how brand list page looks like.

when user clicks on pick image button, set updatemode=1, making delete , upload button visible.

problem sometime user not select image after clicking upload button, instead press cancel in file selection window. time delete , upload button becomes visible. want avoid that.

also when user clicks on delete want input text become empty.

this html code.

<tr ng-repeat="b in brands | filter:searchtext |orderby:'name'">     <td>         <span data-ng-hide="editmode">{{b.name}}</span>          <input type="text" data-ng-show="editmode" data-ng-model="b.name" data-ng-required />         <input type="text" data-ng-show="editmode" data-ng-model="b.image" data-ng-required />          <br><br>         <input type="text" ng-model="b.files[0].name" readonly="readonly">          <button ngf-select ng-model="b.files" class="btn btn-success btn-sm" ng-click="uploadmode=1">             <span class="glyphicon glyphicon-picture"></span> pick image         </button>          <button data-ng-hide="!uploadmode" class="btn btn-danger btn-sm" ng-click="uploadmode=0">             <span class="glyphicon glyphicon-trash"></span> delete         </button>           <button data-ng-hide="!uploadmode" class="btn btn-info btn-sm" ng-click="upload(b.files, b.image)">             <span class="glyphicon glyphicon-upload"></span> upload         </button>        </td>     <td><img src="http://localhost/{{ b.image }}" alt="" border=3 height=75 width=75><br><br>       </td> 

and file upload code.

$scope.upload = function (files, path) {     //alert ('upload');     //alert (path);     //alert (files);     if (files && files.length) {         (var = 0; < files.length; i++) {             var file = files[i];             upload.upload({                 url: '/cgi-bin/upload.pl',                 fields: {                     'filepath': path                 },                 file: file             }).progress(function (evt) {                 var progresspercentage = parseint(100.0 * evt.loaded / evt.total);                 $scope.log = 'progress: ' + progresspercentage + '% ' +                             evt.config.file.name + '\n' + $scope.log;             }).success(function (data, status, headers, config) {                 $timeout(function() {                     $scope.log = 'file: ' + config.file.name + ', response: ' + json.stringify(data) + '\n' + $scope.log;                 });             })             .error(function (data, status, headers, config) {                 alert ('error');             });          }     } }; 

what changes should made above said functionality. please help.

you'll need use ngf-change available in ng-file-upload plugin

instead of ng-click , change ngf-change in html markup

<button ngf-select ng-model="b.files" ngf-change="fileselected($files, $event, b)">     <span class="glyphicon glyphicon-picture"></span> pick image </button> 

pass along ng-repeat object 3rd parameter fileselected function , , in controller defined

$scope.fileselected = function(files, events, b) {   if (files.length) {     b.uploadmode = true;   } else {     b.uploadmode = false;   } }; 

here check whether files object empty or not (note: ngf-change gets called when file selection dialog opens , on successful file selection) , set uploadmode parameter true or false.

for delete file functionality , create function gets called on click of delete button , pass along ng-repeat object

<button ng-if="b.uploadmode" ng-click="removefile(b)">     <span class="glyphicon glyphicon-trash"></span> delete </button> 

in controller , defined removefile function , delete files object

$scope.removefile = function(b) {   delete b.files;   b.uploadmode = false; }; 

see working demo @ http://plnkr.co/edit/zmzwiqjolvilacmc4ubq?p=preview