Check file size before upload for input type = file using angularjs

Question

I have an input type = file element in my form. I want to create a custom directive to check file size as soon as I select a file using an input element. I know how to create a custom directive, but is there a way in angularjs to determine the file size for the selected item. No jquery to use.

Js code:

app.directive('checkFileSize',function(){ return{ require: 'ngModel', link: function(scope, elem, attr, ctrl) { // add a parser that will process each time the value is // parsed into the model when the user updates it. ctrl.$parsers.unshift(function (value) { //i want to do something like this var fileSize= // get file size here if(fileSize>threshold){ ctrl.$setValidity('checkFileSize',false); } // return the value to the model, return someValue; }); } } }); 

Answer 1

How to check file size from directive:

 app.directive('checkFileSize',function(){ return{ link: function(scope, elem, attr, ctrl) { $(elem).bind('change', function() { alert('File size:' + this.files[0].size); }); } } }); 

not jquery version:

 app.directive('checkFileSize', function() { return { link: function(scope, elem, attr, ctrl) { function bindEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else { element.attachEvent('on' + type, handler); } } bindEvent(elem[0], 'change', function() { alert('File size:' + this.files[0].size); }); } } }); 

http://plnkr.co/edit/ybuk6K6YNTIwnLTK5I6Z?p=preview