I have used html file input to select file for uploading. I have created a angular directive. Now I want to set max allowed file size for input. If file size is greater then allowed size, error should be returned by directive. I'm new in angularjs and don't know much about directive. If anyone knows the solution with explanation, it will be appreciated.
Here is my code till now.
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();
});
});
}
}
});
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>
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.
