validate 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 for checking the file size as soon as I select a file using the input element. I know how to create a create a custom directive, but is there any way in angularjs to determine the file size of the selected element. No Jquery is to be used.

The 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;
            });
        }
    }
});

Yes it is possible, but not specific to Angular -stackoverflow.com/questions/3717793/…. You could easily incorporate this into an angular validation directive — Michael Kang
– Michael Kang, Commented Sep 17, 2014 at 8:16
A I : Can you consolidate and provide the solution that worked for you pls. Thanks ! — PavanSandeep
– PavanSandeep, Commented May 5, 2015 at 3:11

Marian Ban · Accepted Answer · 2014-09-17 09:23:23Z

9

How to check file size from a directive:

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

non 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

edited Sep 17, 2014 at 9:23

answered Sep 17, 2014 at 8:32

Marian Ban

8,1881 gold badge35 silver badges45 bronze badges

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

3 Comments

A.I Over a year ago

this works. But it seems it is using jquery. Do you have a solution which does not use jquery?

A.I Over a year ago

basically, this: elem[0].files[0].size does the trick inside our linking function.

PavanSandeep Over a year ago

A 1 :Can you consolidate and provide the solution that worked for you pls. Thanks !

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related