Search code examples
ng-file-upload

Cancel a file upload in ng-file-upload


I have ng-file-upload with form submit running. I would like to add a button to cancel the upload after the user selects a file. I have tried:

<button class= "btn btn-warning btn-cancel" ng-disabled="!myForm.$valid" 
          ng-click="cancelPic(picFile)">Cancel</button>

and in the controller:

$scope.cancelPic = function() {
        myForm.reset();
        file: '';
    }

The form does seem to reset as I get a "please select a file" message but the image remains - in the dev tools Elements:

<img ng-show="myForm.file.$valid" ngf-src="!picFile.$error &amp;&amp; picFile" class="thumb" src="blob:http%3A//localhost%3A3000/85f1b27c-a92e-447d-b760-8cfe17bbd6b7" style="">

Obviously I'm barking up the wrong tree here. Can anyone help?


Solution

  • Ok I found what I sought at: https://github.com/danialfarid/ng-file-upload/issues/12 The code that works is:

    $scope.cancelPic = function(file) {
            myForm.reset();
            $scope.picFile = undefined;
        }
    

    Now I need to apply this to individual images so a user can choose which to cancel and not reset the whole form. That's for another day.