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.

Constantine Poltyrev · Accepted Answer · 2015-11-17 07:41:12Z

3

I suppose the straightforward approach will do here.

Add a deleteFile handler to your scope taking array index of the file being deleted.
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.
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);
      }
}

edited Nov 17, 2015 at 7:41

answered Nov 17, 2015 at 1:26

Constantine Poltyrev

1,02410 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

danial Over a year ago

calling $scope.files.splice(idx, 1); will not update the model since the $scope.files object is still the same. You need to do $scope.files = $scope.files.slice(0)` after the splice to make the model change be updated on the html view.

Mark Over a year ago

@ConstantinePoltyrev - this works as you initially had it, but when I submit the form with the files, it still post all files even though I had removed some. Seems this just removes them visually and not from the queue. Any ideas?

Constantine Poltyrev Over a year ago

@Mark Please post the full code of your form, so I could amend it for you.

Mark Over a year ago

@ConstantinePoltyrev - my code for that part of the form is in a plunker here: plnkr.co/edit/oDagAYFIsEop9WYpRbqY?p=catalogue

Constantine Poltyrev Over a year ago

@Mark - it seems to be a wrong plunker. No js and very basic HTML. No form there.

|

Collectives™ on Stack Overflow

Angular ng-file-upload delete

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related