How to fire button click event when file selected in input file type?

Question

I have a file <input /> and a <button>, with a click handler assigned to the button.

What I would like to do is to execute the click handler on the submit button when the selected file changes on the file input.

My code currently looks like this:

angular.module('myapp', [])
  .controller('MyController', function($scope) {
    $scope.clickMe= function(){
         alert("File Submitted!");  
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp">
<div ng-controller="MyController">
    <input type = "file">
    <div><button ng-click="clickMe()">Submit</button></div>
</div>
</body>

Are you wanting to automatically submit, when a file has been selected? — Dacre Denny, Mar 02 '19 at 09:45
You might need a directive. Check out this answer - https://stackoverflow.com/questions/17063000/ng-model-for-input-type-file-with-directive-demo — Anurag Srivastava, Mar 02 '19 at 09:46

score 1 · Accepted Answer · answered Mar 02 '19 at 09:53

If I understand your question correctly, then you should find that the logic fired when the submit button is clicked, can instead be automatically invoked when a file is picked on your <input type="file" /> element by updating your template as follows:

<input type="file" onchange="angular.element(this).scope().clickMe(this)">

This will cause the clickMe() function on the $scope object of the enclosing controller MyController, to be called. Here's a complete example (with submit button removed seeing it's redundant):

angular.module('myapp', [])
  .controller('MyController', function($scope) {
    $scope.clickMe = function() {
      alert("File Submitted!");
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>

<body ng-app="myapp">
  <div ng-controller="MyController">
    <input type="file" onchange="angular.element(this).scope().clickMe(this)"> 
  </div>
</body>

How to fire button click event when file selected in input file type?

1 Answers1