CODEWITHSUNDEEP
angularjs
Rye
Rye

Reputation: 189

How to trigger element click on angular js?

I have an input file and it is hidden. I want to trigger the input file once the button is clicked but my code is not working. What changes does it need to make it work?

HTML:

<input type="file" ng-model="data.file" id="upload" style="display:none;">
<button type="button" ng-click="browseFile()">Choose a file</button>

JavaScript:

$scope.browseFile = function () {
  angular.element(document.querySelector('#upload')).triggerHandler('click'); 
 }

Upvotes: 1

Views: 531

Answers (2)

Francesco Re
Francesco Re

Reputation: 836

As adardesign said

This is due to a security restriction.
I found out that the security restriction is only when the 

<input type="file"/>

is set to display:none; or is visibility:hidden. So i tried positioning it outside the viewport by setting position:absolute and top:-100px; and voilà it works.

You can find more in this post: Jquery trigger file input

Upvotes: 0

Saeed
Saeed

Reputation: 5488

In html use something like below

<img id="preview_image" src="" accept="image/*" class="upload_img" alt="">

<input id="image_upload" ng-model="file" type="file" class="upload_image_file" />

And in controller use $watch

$scope.$watch("file", function() {
  readURL(angular.element("#image_upload")[0]);
});

function readURL(input) {
  if (input && input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      angular.element("#preview_image").attr("src", e.target.result);
      vm.base64File = e.target.result;
    };
    reader.readAsDataURL(input.files[0]);
  }
}

For more info, read here and here

Update

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.file = '';

  $scope.$watch("file", function() {
    console.log($scope.file)
  });
});
app.directive('fileModel', ['$parse', function($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var model = $parse(attrs.fileModel);
      var modelSetter = model.assign;

      element.bind('change', function() {
        scope.$apply(function() {
          modelSetter(scope, element[0].files[0]);
        });
      });
    }
  };
}]);
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <label class="upload_image_label" for="image_upload">
      choose file
      <input id="image_upload" file-model="file" type="file" style="display:none" />
    </label>

    <hr> <br> File: {{file}}

  </div>
</body>

</html>

Upvotes: 4

Related Questions