Set max size for file input

Question

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?

Here is my current code:

HTML

<input type="file" id="flBook" name="flBook" valid-file required accept=".pdf" ng-model="ebook.file" ng-if="ebook.ebook_file.st_filename == undefined">
<span ng-if="formBook.$submitted || formBook.flBook.$touched" ng-cloak>
    <span class="text-red" ng-show="formBook.flBook.$valid == false" ng-cloak>E-Book is required.</span>
</span>

JS

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

Check this question for File API example that you can integrate into your directive - stackoverflow.com/questions/3717793/… — shershen
– shershen, Commented Oct 4, 2016 at 7:17
@shershen, As I told, I'm new in angularjs. So I don't know how to integrate into angularjs directive. So can you set example? — Akshay Vaghasiya
– Akshay Vaghasiya, Commented Oct 4, 2016 at 7:45
if you're new to angular go for the option that @user3121072 told you - try using ready made directive - for example this highly configurable plugin - github.com/danialfarid/ng-file-upload — shershen
– shershen, Commented Oct 4, 2016 at 8:17

ngCoder · Accepted Answer · 2016-10-04 09:52:28Z

Took some liberty and changed your directive implementation a little bit as you are just binding the path of the file to your ng-model instead of file data.Also added the file size check (Max 2000 Bytes) which can changed as preferred. Here is the working plunker.

Changed directive in JS

angular.module('myApp', ['ng'])

    .directive('validFile', function($parse) {
        return {
            require: 'ngModel',
            restrict: 'A',
            link: function(scope, el, attrs, ngModel) {
                var model = $parse(attrs.ngModel);
                var modelSetter = model.assign;
                var maxSize = 2000; //2000 B
                el.bind('change', function() {

                    scope.$apply(function() {
                        scope.ebook.maxSizeError = false;
                        if (el[0].files.length > 1) {
                            modelSetter(scope, el[0].files);
                        } else {
                            modelSetter(scope, el[0].files[0]);
                        }
                        var fileSize = el[0].files[0].size;
                        if (fileSize > maxSize) {
                            scope.ebook.maxSizeError = true;
                        }
                    });
                });
            }
        }
    })
    .controller('Ctrl', ['$scope', function($scope) {
        $scope.ebook = {};//scope object to hold file details
        $scope.uploadDocs = function() {
            var file = $scope.ebook.file;
            console.log(file);
        };
    }]);

In your HTML

<body ng-controller="Ctrl">

  <input type="file" id="flBook" name="flBook" valid-file required accept=".pdf" ng-model="ebook.file" ng-if="ebook.ebook_file.st_filename == undefined">
  <span ng-if="formBook.$submitted || formBook.flBook.$touched" ng-cloak>
    <span class="text-red" ng-show="formBook.flBook.$valid == false" ng-cloak>E-Book is required.</span>
  </span>
  <p ng-show="ebook.maxSizeError">Max file size exceeded (2000 bytes)</p>
  <button ng-click="uploadDocs()">Upload</button>
</body>

user3121072 · Accepted Answer · 2016-10-04 07:16:13Z

0

I would say you need to configure the backend to halt the upload when a certain size is reached. There are a number of ready to use directives, for the front-end stuff - just search for angular upload file backend. For the backend, you should indicate the backend you use for further help.

answered Oct 4, 2016 at 7:16

user3121072

11 bronze badge

1 Comment

Akshay Vaghasiya Over a year ago

Thanks for your answer. But I don't want to use ready to use directives. So I must have to add something in angularjs directive.

Collectives™ on Stack Overflow

Set max size for file input

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related