Trigger <input type="file"> file select with angular programatically

Question

Im using ngImgCrop as can be seen in this JSFiddle.
What I try to achieve is that the image selection box will open automatically when i show(using ng-if) the:

<div ng-if="showImageSelector">
 <div>Select an image file: <input type="file" id="fileInput" /></div>
 <div class="cropArea">
  <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
 </div>
</div>

that is: i want to programatically open the image selection window, without even showing the user the:

<input type="file" id="fileInput" />

Iv'e tried put in the controller several variations of click event of the input, but none of them worked, so far iv'e tried: 1.

$timeout(function() {
    angular.element('#fileInput').triggerHandler('click');
  }, 0);

2.

angular.element(document).ready(function () {
    angular.element('#fileInput').triggerHandler('click');
  });

3.

setTimeout(function(){
    angular.element('#fileInput').triggerHandler('click');
  }, 1000);

4.

setTimeout(function(){
    document.getElementById('fileInput').click();
  }, 1000);

Tyler.z.yang · Accepted Answer · 2016-05-04 11:54:15Z

1

For trigger the file selector open programmatically, the answer is yes.

But you need to make sure this event was fired by THE USER.

For example, you have a button there, you attach the click event on it. After the user click this button, inside the event handler, you can trigger by javascript code e.g,document.getElementById('fileInput').click(). This should work.

However, if you want to simply run several lines of javascript code to open a file selector without user's click, that's not possible, because that violate the security policy.

So I added some code to your sample,

html,

<button ng-click='open()'>Open selector</button>

javascript,

$scope.open = function() {
     document.getElementById('fileInput').click(); //this work
};

Hope this would solve your problem. : )

edited May 4, 2016 at 11:54

answered May 4, 2016 at 11:42

Tyler.z.yang

2,4601 gold badge20 silver badges31 bronze badges

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

Comments

Cony · Accepted Answer · 2016-08-21 13:16:08Z

1

Ended up wrapping the ngImgCrop with my directive, in it iv'e placed that:

$timeout(function () {
      angular.element(document.querySelector('#fileInput')).click();
      $log.debug("poped it");
    }, 250);

in the link function. Aside the real element i show for the img selector, iv'e placed this at my index.html:

<div ng-show="false">
  <my-image-select cropped-image="groupDetails.newPic" return-func="groupDetails.imageSelectFinish"></my-image-select>
</div>

and it works. without the extra invisible my-image-select in index.html, the file chooser only auto open from the second attempt.

answered Aug 21, 2016 at 13:16

Cony

2231 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Trigger <input type="file"> file select with angular programatically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related