AngularJS ng-upload reset file selection

Question

I am using a simple file upload as below:

<button type="file" ngf-select ng-model="fileData"
        ng-change="fileChanged(fileData)" name="file"  required >
    Select File
</button>

And I have another button which when clicked I want to clear out the file that was selected.

<button type="button" class="btn btn-primary" ng-click="clearFile()">
    Clear
</button>

I have the Controller code for button click as:

$scope.fileChanged = function(fileData) {
  if (fileData != undefined) {
    $scope.selectedFileName = fileData.name;
   }
}  

$scope.clearFile = function () {
        //None of these works
        //angular.element("input[type='file']").val(null);
       // $scope.fileData = [];
}

I have tried couple of options as I searched through previous posts but none of it works. What am I missing here.

Here is my jsfiddle: http://jsfiddle.net/abco2Lp0/

` $scope.clearFile = function () { $scope.selectedFileName = null; }` this is working i tried on your jsfiddle — Nawnit Sen
– Nawnit Sen, Commented Sep 28, 2018 at 13:13

georgeawg · Accepted Answer · 2018-09-28 20:00:02Z

1

Try this:

$scope.clearFile = function () {
   $scope.fileData = [];
   $scope.selectedFileName = null;
   $scope.uploadedFile = [];
}

Hope this helps.

edited Sep 28, 2018 at 20:00

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Sep 28, 2018 at 12:49

Vermicello

3081 gold badge6 silver badges11 bronze badges

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

2 Comments

aman Over a year ago

Well this works to the extent the it clears out the UI, but the file is actually there in the file upload. See my updated fiddle: jsfiddle.net/rx6zpqe9 If on upload button click I can still see the file exists.

Vermicello Over a year ago

You are right, I think you should initialise $sope.uploadedFile too $sope.uploadedFile = [];

Collectives™ on Stack Overflow

AngularJS ng-upload reset file selection

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related