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 - http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation — shershen, Oct 04 '16 at 07: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, Oct 04 '16 at 07: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 - https://github.com/danialfarid/ng-file-upload — shershen, Oct 04 '16 at 08:17

score 1 · Accepted Answer · answered Oct 04 '16 at 09:52

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>

score 0 · Answer 2 · answered Oct 04 '16 at 07:16

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 04 '16 at 07:16

user3121072

1
1

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. – Akshay Vaghasiya Oct 04 '16 at 07:44

Set max size for file input

2 Answers2

Linked