There is no way to detect when a user selects files from an Input Type File form element in Angular JS. So we will have to do it the old fashion way.

Rather than binding, we can directly make use of the input element’s onchange event.

And in our Javascript file where your controller is located, add this function:

That’s it!

So when I tried to open a file input dialog, I got this error Error: [$rootScope:inprog]. This happens because there can be only one $digest or $apply operation in progress.

To avoid this problem, you can do two things:

1) The Angular JS way by adding a timeout. Make sure to include $timeout and inject it in your controller.

Sample code:

2) The old fashion way by adding onclick=”document.getElementById(‘id’).click()” to the input file element.

Related Posts Plugin for WordPress, Blogger...