Developer Center

I'm new with Jasmine/Karma and I recently encountered a problem with input file. I want to test the width and height of the image I uploaded. If it doesn't fit the max or min values given, it will add class "ng-invalid-image-dimension" to input.
Now the code works but in test, the function image.onload is not tiggered. I don't know why and it stucked me for several days please help!
imageUpload.directive.js
(function() {
'use strict';
angular.module('components.imageUpload', [])
.directive('imageUpload', function(defaultImages, imageDimensions) {
return {
restrict: 'EA',
scope: {
name: '#',
maxWidth: '#?',
minWidth: '#',
maxHeight: '#?',
minHeight: '#'
},
require: '^form',
template: '<input type="file" id="upload" name="upload" ng-model="file" onchange="angular.element(this).scope().uploadFile(this.files,name)">',
link: function(scope, element, attrs, form) {
scope.maxWidth = scope.maxWidth || scope.minWidth;
scope.maxHeight = scope.maxHeight || scope.minHeight;
scope.form = form;
scope.uploadFile = function(files, imgName) {
scope.$apply(function() {
scope.imgName = imgName;
scope.file = files[0];
});
var r = new FileReader();
r.readAsDataURL(scope.file);
r.onload = function(file){
console.log("filereader onload triggered");
var validateW = false;
var validateH = false;
var image = new Image();
image.src = file.target.result;
image.onload = function() {
console.log("image onload triggered");
validateW = checkImageDimension(this.width, scope.minWidth, scope.maxWidth);
validateH = checkImageDimension(this.height, scope.minHeight, scope.maxHeight);
if(validateW && validateH) {
scope.$apply(function() {scope.form[scope.name].$setValidity("imageDimension", true);});
} else {
scope.$apply(function() { scope.form[scope.name].$setValidity("imageDimension", false);});
}
};
};
};
function checkImageDimension(val, min, max) {
return (val >= min) && (val <= max);
}
}
})
})();
imageUpload.directive.html
<div class="form-group">
<div class="col-sm-8">
<input type="file" id="{{name}}" name="{{name}}" ng-model="file" placeholder="{{name}}" onchange="angular.element(this).scope().uploadFile(this.files,name)">
</div>
<div class="col-sm-4">
<span class="help-inline" ng-show="form[name].$error.imageDimension">Image dimension is not valid !</span>
</div>
</div>
imageUpload_test.directive.js:
describe('components.imageUpload', function() {
var $compile, $rootScope;
beforeEach(angular.mock.module('components.imageUpload'));
beforeEach(module('js/components/imageUpload/imageUpload.directive.html'));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
describe('image-upload directive', function() {
var element, scope, input, files, inputScope;
beforeEach(function() {
scope = $rootScope.$new();
element = angular.element('<form name="testForm" novalidate><image-upload name="testImage" default="false" type="png" min-width="150" max-width="300" min-height="57"></image-upload></form>');
$compile(element)(scope);
scope.$digest();
input = element.find('input');
inputScope = angular.element(input).scope();
});
it('should have ng-invalid-image-dimension class when uploaded a wrong size file', function(done) {
var mockFileHex = ["iVBORw0KGgoAAAANSUhEUgAAADcAAAA3CAYAAACo29JGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEQjE3N0M0MDMxMjA2ODExODIyQUI1MDY3MDVEMjIwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDc2MTlGMDVGQjExMUU1QTIwMEFFNzQ2ODAyRUNEMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDc2MTlFRjVGQjExMUU1QTIwMEFFNzQ2ODAyRUNEMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6REIxNzdDNDAzMTIwNjgxMTgyMkFCNTA2NzA1RDIyMDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6REIxNzdDNDAzMTIwNjgxMTgyMkFCNTA2NzA1RDIyMDAiLz4gPC9yZGY6RGVzY3Jp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"];
var blob = new Blob(mockFileHex, {type:'image/png'});
blob.name = "logoTest";
files = {0: blob, target: {result: {}}};
inputScope.uploadFile(files, "logoTest");
expect(input.hasClass('ng-invalid-image-dimension')).toEqual(true);
});
})
})
As I mentioned above, "image onload triggered" neveer displayed.