How to clear form input after uploading file on s3 bucket in angularjs?

Question

A form is not getting clear after uploading a file.

  <div class="aboutFile">
     <input type="file" name="file" fileread="vm.file" class="form-control" ng-model="vm.file">
        <div class="create-component--perma-bg">
            <i class="fa fa-plus-square-o" aria-hidden="true"></i>
            <span ng-if="!vm.file.name">Add File </span>
            <span ng-if="vm.file.name">{{vm.file.name}}</span>
        </div>
          <button type="button" class="btn btn-info bgChangeBtnInfo" ng-
           click="vm.upload(vm.file)" ng-disabled="!vm.file"> Upload</button>
       </div>

vm.upload method called.

    vm.upload = (fileObj) =>{
        vm.call("saveSlideFile", vm.slideObject, (error, result) => {
          if (!error) {
           vm.file={};
           console.log('File saved successfully');
          }
       })
  }

fileread directive

angular.module('livePoll')
    .directive("fileread", [function () {
        return {
            scope: {
                fileread: "="
            },
            link: function(scope,element, attributes){
                $('.button-collapse').sideNav();
                element.bind("change", function (event) {
                    scope.$apply(function () {
                        scope.fileread = event.target.files[0];
                        scope.$parent.fileread = scope.fileread;
                    });
                })
            }};
    }]

Your directive is changing the model only on `change` event, but doesn't clear the field when the model changes from the parent controller. Take a look at [this answer and possible directive implementation](https://stackoverflow.com/a/44517492/4222181). — Stanislav Kvitash, Aug 10 '17 at 09:32

Stanislav Kvitash · Answer 1 · 2017-09-18T08:31:43.360

1) Avoid using scope.$parent.fileread = scope.fileread; this code smells, doesn't make any sense since you are using = binding and could lead to unpredictable behavior.

2) In case you are using ngModel, you can avoid using bindings in your directive and use NgModelController.$setViewValue to update the view value like:

function onChange (event) {
  //update bindings in $apply block
  $scope.$apply(function(){
    ngModel.$setViewValue(event.target.files[0]);
  });
}
//change event handler
element.on('change', onChange);

3) You can set up a $watch on NgModelController.$viewValue inside your directive and clear the input field, when the value was changed in parent:

//set up a $watch for the ngModel.$viewValue
$scope.$watch(function () {
  return ngModel.$viewValue;
}, function (value) {
  //clear input value if model was cleared
  if (!value) {
    element.val("");
  }
});

score 0 · Accepted Answer · answered Sep 18 '17 at 07:15

I resolved this problem with just one line of code with the help of amazing Tech website i.e. Technoalerts. Thanks guys for the help and I'll share this info with you all.

Just follow the steps mentioned below:-

In input form, we have to assign the id.

 <input type="file" name="file" fileread="vm.file" class="form-control" id="inputFile" ng-model="vm.file">

In this Where vm.upload method is called there i used $('#inputFile').val(''); for clearing a form field after performing any action.

vm.upload

 vm.upload = (fileObj) =>{
    vm.call("saveSlideFile", vm.slideObject, (error, result) => {
      if (!error) {
       $('#inputFile')
       vm.file={};
       console.log('File saved successfully');
      }
   })
}

Manipulating DOM in controller [is not a good practice](https://stackoverflow.com/questions/29981419/angularjs-why-manipulating-dom-in-controller-is-a-bad-thing). Why just not do this in the `directive`? — Stanislav Kvitash, Sep 18 '17 at 08:39

How to clear form input after uploading file on s3 bucket in angularjs?

2 Answers2