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.

Here is my version of a confirm dialog window that shows a Yes and No button. The class also includes a key listener to close the window in case the user presses the ESC key. This is equivalent to pressing the No button.

This is how it looks like.

And here is the code.

And this is the content of the CSS file.

Related Posts Plugin for WordPress, Blogger...