title: Set max size for file input
body: <p>I have used HTML file input to select a file for uploading using a custom AngularJS directive. Now I want to set the max allowed file size for the input. If the file size is greater than the allowed size, then an error should be returned by the directive. Can someone explain how I can do this?</p>
  <p>Here is my current code:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;input type=&quot;file&quot; id=&quot;flBook&quot; name=&quot;flBook&quot; valid-file required accept=&quot;.pdf&quot; ng-model=&quot;ebook.file&quot; ng-if=&quot;ebook.ebook_file.st_filename == undefined&quot;&gt;
  &lt;span ng-if=&quot;formBook.$submitted || formBook.flBook.$touched&quot; ng-cloak&gt;
      &lt;span class=&quot;text-red&quot; ng-show=&quot;formBook.flBook.$valid == false&quot; ng-cloak&gt;E-Book is required.&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>app.directive('validFile', function () {
      return {
          require: 'ngModel',
          link: function (scope, el, attrs, ngModel) {
              //change event is fired when file is selected
              el.bind('change', function () {
                  scope.$apply(function () {
                      ngModel.$setViewValue(el.val());
                      ngModel.$render();
                  });
              });
          }
      }
  });
  </code></pre>