Angular ng-file-upload delete

Question

Trying to figure best approach to be able to delete a file when using ng-file-upload. I got my list of files with a list. My html is:

<div>
    <p>Files:</p>
</div>
<div>
    <ul>
        <li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}</li>
    </ul>
</div>

In my controller, I have:

$scope.$watch('files', function () {
    $scope.upload($scope.files);
});
$scope.$watch('file', function () {
    if ($scope.file != null) {
        $scope.files = [$scope.file];
    }
});
$scope.log = '';


$scope.upload = function (files) {
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          var file = files[i];

          if (!file.$error) {

            Upload.upload({
                url: (serviceBase + 'api/ppt/docs/upload/multi?transId=' + [$scope.transId]),
                data: {
                  username: $scope.username,
                  file: file,
                  filename: file.name
                }
            }).progress(function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                $scope.log = 'progress: ' + progressPercentage + '% ' +
                            evt.config.data.file.name + '\n' + $scope.log;
            }).success(function (data, status, headers, config) {
                $timeout(function() {
                    $scope.log = 'file: ' + config.data.file.name + ', Response: ' + JSON.stringify(data) + '\n' + $scope.log;
                });
            }).error(function(data, status, headers, config) {

                var errors = [];
                $scope.errors = data;

                for (var i=0; i<$scope.errors.length; i++)
                {
                    errors.push($scope.errors[i].errMsg);
                }

                $scope.message = "Error uploading files due to: " + errors.join(' ');
            });
          }
        }
    }
};

I see some examples in the documentation, but not seeing best ways to implement, especially if I want individual deletes/remove for each file uploaded rather than just all.

Thanks much.

Answer 1

I suppose the straightforward approach will do here.

1. Add a deleteFile handler to your scope taking array index of the file being deleted.
2. Add a link/button/handle for each file to delete it upon clicking and set it's attribute ng-click="deleteFile($index) . $index is created by ng-repeat .
3. In your deleteFile handler call the backend to delete the file and upon success splice the files array to remove the deleted entry.

HTML:

<li ng-repeat="f in files">
     {{f.name}} {{f.$error}} {{f.$errorParam}} <a class="deleteHandle" ng-click="deleteFile($index)">&times;</a>
</li>

JS:

$scope.deleteFile = function(idx) {
     var file = $scope.files[idx];
     if (file.isUploaded) {
          $http.delete('/api/files/'+file.id).then(function(response){
               if (response.status == 200) {
                    $scope.files.splice(idx, 1);
               }
         });
      } else {
           $scope.files.splice(idx, 1);
      }
}