Is there a way to block an image from being uploaded if it exceeds a specified size limit? Currently, I am using angular-base64-upload and although my error message appears when the image is too large, the image still gets uploaded. I'm puzzled as to why the image is still able to upload even when it surpasses the set limit. Any thoughts on this issue would be greatly appreciated. Thank you.
HTML
<div ng-controller="UpLoadImage">
<div ng-repeat="step in stepsModel">
<img class="thumb" ng-src="{{step}}"/>
</div>
<label for="file">Add Creative</label>
<form name="form">
<input type='file' ng-model='files' name='files' multiple accept='image/*, .zip' maxsize='50' onload='onLoad'
ng-model-instant onchange='angular.element(this).scope().imageUpload(this)' required
base-sixty-four-input>
<span ng-show='form.files.$error.maxsize'>Files must not exceed 50 KB</span>
</form>
App.js
angular.module('myApp', ['naif.base64'])
.controller('UpLoadImage', function ($scope, $http, $window, $rootScope) {
$scope.imageUpload = function (element) {
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(element.files[0]);
};
$scope.imageIsLoaded = function (e) {
$scope.$apply(function () {
$scope.stepsModel.push(e.target.result);
});
$scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {
alert('image uploaded');
};
};
$scope.stepsModel = [];
})