How to get file selection complete event in angularJS

Question

Currently this is How brand list page looks like.

when user clicks on Pick Image button, i set updateMode=1, making delete and upload button visible.

Problem is sometime user does not select a image after clicking upload button, instead press cancel in file selection window. that time also delete and upload button becomes visible. I want to avoid that.

Also when user clicks on delete i want input text to become empty.

This is my 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 this is file upload code.

$scope.upload = function (files, path) {
    //alert ('upload');
    //alert (path);
    //alert (files);
    if (files && files.length) {
        for (var i = 0; i < 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 i should made to get above said functionality. please help.

Answer 1

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

Instead of the ng-click , change it to the ngf-change in the 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 the ng-repeat object as the 3rd parameter to the fileSelected function , and in the controller defined it as

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

Here we check whether files object is empty or not (Note: ngf-change gets called when the file selection dialog opens and on successful file selection) and set the uploadMode parameter as true or false.

For the delete file functionality , create a function which gets called on the click of Delete button and pass along the ng-repeat object

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

In the controller , defined the removefile function , where you delete the files object

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

See working demo at http://plnkr.co/edit/zmZwiqJOLVILaCmc4uBQ?p=preview