"
72 | ]
73 | }
74 |
--------------------------------------------------------------------------------
/src/js/fileReader.service.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 | var module = angular.module('fileReaderService', []);
4 |
5 | // Copied from the following link with onProgress excluded because it's not needed
6 | // http://odetocode.com/blogs/scott/archive/2013/07/03/building-a-filereader-service-for-angularjs-the-service.aspx
7 | module.factory('fileReader', ['$q',
8 | function($q) {
9 | var onLoad = function(reader, deferred, scope) {
10 | return function() {
11 | scope.$apply(function() {
12 | deferred.resolve(reader.result);
13 | });
14 | };
15 | };
16 |
17 | var onError = function(reader, deferred, scope) {
18 | return function() {
19 | scope.$apply(function() {
20 | deferred.reject(reader.result);
21 | });
22 | };
23 | };
24 |
25 | var getReader = function(deferred, scope) {
26 | var reader = new FileReader();
27 | reader.onload = onLoad(reader, deferred, scope);
28 | reader.onerror = onError(reader, deferred, scope);
29 | return reader;
30 | };
31 |
32 | var readAsDataURL = function(file, scope) {
33 | var deferred = $q.defer();
34 |
35 | var reader = getReader(deferred, scope);
36 | reader.readAsDataURL(file);
37 |
38 | return deferred.promise;
39 | };
40 |
41 | return {
42 | readAsDataUrl: readAsDataURL
43 | };
44 | }
45 | ]);
46 | })();
47 |
--------------------------------------------------------------------------------
/src/js/imageWithPreview.directive.js:
--------------------------------------------------------------------------------
1 | /*jshint -W072 */
2 | // ^ ignore jshint warning about link method having too many parameters
3 | (function() {
4 | 'use strict';
5 | var module = angular.module('ngImageInputWithPreview', [
6 | 'fileReaderService',
7 | ]);
8 |
9 | module.directive('imageWithPreview', ['fileReader', '$q',
10 | function(fileReader, $q) {
11 | var DEFAULT_MIMETYPES = 'image/png,image/jpeg';
12 | var NOT_AN_IMAGE = 'this-is-not-an-image';
13 |
14 | var isAnAllowedImage = function(allowedTypes, file) {
15 | if (!allowedTypes) {
16 | allowedTypes = DEFAULT_MIMETYPES;
17 | }
18 | var allowedTypeArray = allowedTypes.split(',');
19 | return allowedTypeArray.some(function(allowedType) {
20 | if (allowedType === file.type) {
21 | return true;
22 | }
23 | var allowedTypeSplit = allowedType.split('/');
24 | var fileTypeSplit = file.type.split('/');
25 | return allowedTypeSplit.length === 2 && fileTypeSplit.length === 2 && allowedTypeSplit[1] === '*' &&
26 | allowedTypeSplit[0] === fileTypeSplit[0];
27 | });
28 | };
29 | var createResolvedPromise = function() {
30 | var d = $q.defer();
31 | d.resolve();
32 | return d.promise;
33 | };
34 |
35 | return {
36 | restrict: 'A',
37 | require: 'ngModel',
38 | scope: {
39 | image: '=ngModel',
40 | allowedTypes: '@accept',
41 | dimensionRestrictions: '&dimensions',
42 | sizeRestrictions: '&size'
43 | },
44 | link: function($scope, element, attrs, ngModel) {
45 | element.bind('change', function(event) {
46 | var file = (event.srcElement || event.target).files[0];
47 | // the following link recommends making a copy of the object, but as the value will only be changed
48 | // from the view, we don't have to worry about making a copy
49 | // https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$setViewValue
50 | ngModel.$setViewValue(file, 'change');
51 | });
52 | ngModel.$parsers.push(function(file) {
53 | if (!file) {
54 | return file;
55 | }
56 | if (!isAnAllowedImage($scope.allowedTypes, file)) {
57 | return NOT_AN_IMAGE;
58 | }
59 | return {
60 | fileReaderPromise: fileReader.readAsDataUrl(file, $scope),
61 | };
62 | });
63 | $scope.$watch('image', function(value) {
64 | if (value && typeof value === 'string') {
65 | $scope.image = {
66 | src: value,
67 | isPath: true,
68 | };
69 | }
70 | });
71 | ngModel.$validators.image = function(modelValue, viewValue) {
72 | var value = modelValue || viewValue;
73 | return value !== NOT_AN_IMAGE;
74 | };
75 | ngModel.$asyncValidators.parsing = function(modelValue, viewValue) {
76 | var value = modelValue || viewValue;
77 | if (!value || !value.fileReaderPromise) {
78 | return createResolvedPromise();
79 | }
80 | // This should help keep the model value clean. At least I hope it does
81 | value.fileReaderPromise.finally(function() {
82 | delete value.fileReaderPromise;
83 | });
84 | return value.fileReaderPromise.then(function(dataUrl) {
85 | value.src = dataUrl;
86 | }, function() {
87 | return $q.reject('Failed to parse');
88 | });
89 | };
90 | ngModel.$asyncValidators.dimensions = function(modelValue, viewValue) {
91 | if (!attrs.dimensions) {
92 | return createResolvedPromise();
93 | }
94 | var value = modelValue || viewValue;
95 | if (!value || !value.fileReaderPromise) {
96 | return createResolvedPromise();
97 | }
98 | var deferred = $q.defer();
99 | value.fileReaderPromise.then(function(dataUrl) {
100 | // creating an image lets us find out its dimensions after it's loaded
101 | var image = document.createElement('img');
102 | image.addEventListener('load', function() {
103 | var valid = $scope.dimensionRestrictions({
104 | width: image.width,
105 | height: image.height,
106 | });
107 | $scope.$apply(function() {
108 | if (valid) {
109 | deferred.resolve();
110 | } else {
111 | deferred.reject('Invalid dimensions');
112 | }
113 | });
114 | });
115 | image.addEventListener('error', function() {
116 | $scope.$apply(function() {
117 | deferred.reject('Failed to detect dimensions. Not an image!');
118 | });
119 | });
120 | image.src = dataUrl;
121 | }, function() {
122 | deferred.reject('Failed to detect dimensions');
123 | });
124 | return deferred.promise;
125 | };
126 | ngModel.$asyncValidators.size = function(modelValue, viewValue) {
127 | if (!attrs.size) {
128 | return createResolvedPromise();
129 | }
130 |
131 | var value = modelValue || viewValue;
132 |
133 | if (!value || !value.fileReaderPromise) {
134 | return createResolvedPromise();
135 | }
136 |
137 | var deferred = $q.defer();
138 |
139 | value.fileReaderPromise.then(function(dataUrl) {
140 |
141 | var image = document.createElement('img');
142 |
143 | image.addEventListener('load', function() {
144 | var valid = $scope.sizeRestrictions({
145 | size: viewValue.size
146 | });
147 |
148 | $scope.$apply(function() {
149 | if (valid) {
150 | deferred.resolve();
151 | } else {
152 | deferred.reject('Invalid size');
153 | }
154 | });
155 |
156 | });
157 |
158 | image.src = dataUrl;
159 | }, function() {
160 | deferred.reject('Failed to detect size');
161 | });
162 | return deferred.promise;
163 | };
164 | }
165 | };
166 | }
167 | ]);
168 | })();
169 |
--------------------------------------------------------------------------------
/src/less/style.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/deiwin/ngImageInputWithPreview/6247398bf9599cb4a6fed8931872aadee00b1b9f/src/less/style.less
--------------------------------------------------------------------------------
/tasks/files.js:
--------------------------------------------------------------------------------
1 | var _ = require('grunt').util._;
2 | var files = {
3 | grunt: 'Gruntfile.js',
4 |
5 | source: [
6 | 'src/js/helper.module.js',
7 | 'src/js/!(helper.module)*.js'
8 | ],
9 | sourceStyle: [
10 | 'src/less/style.less'
11 | ],
12 |
13 | distStyle: 'dist/<%= pkg.name %>.css',
14 | distStyleMin: 'dist/<%= pkg.name %>.min.css',
15 | dist: 'dist/<%= pkg.name %>.js',
16 | distMin: 'dist/<%= pkg.name %>.min.js',
17 | dists: 'dist/*',
18 |
19 | unitTests: ['test/unit/SpecHelper.+(js|coffee)', 'test/unit/**/*Spec.+(js|coffee)'],
20 |
21 | environments: {},
22 |
23 | demo: 'demo/*',
24 |
25 | 'package': ['package.json']
26 | };
27 |
28 | var baseEnvironment = [].concat(
29 | 'node_modules/angular/angular.js',
30 | files.source
31 | );
32 |
33 | var demoEnvironment = _.clone(baseEnvironment);
34 | var karmaEnvironment = _.clone(baseEnvironment);
35 |
36 | karmaEnvironment.push('node_modules/angular-mocks/angular-mocks.js');
37 |
38 |
39 | files.environments.demo = demoEnvironment;
40 | files.environments.karma = karmaEnvironment;
41 |
42 | if (typeof module === 'object') {
43 | module.exports = files;
44 | }
45 |
--------------------------------------------------------------------------------
/tasks/helpers.js:
--------------------------------------------------------------------------------
1 | /* global process */
2 | var grunt = require('grunt');
3 | var lf = grunt.util.linefeed;
4 | var fs = require('fs');
5 | var path = require('path');
6 | var Helpers = {};
7 | var base = process.cwd();
8 | var glob = require('glob');
9 |
10 | /* Overwrite browser env variables if grunt options are set */
11 | var browsers = grunt.option('browser') || grunt.option('browsers');
12 | if (browsers) {
13 | process.env.KARMA_BROWSERS = browsers;
14 | process.env.PROTRACTOR_BROWSERS = browsers;
15 | }
16 |
17 | var reporters = grunt.option('reporter') || grunt.option('reporters');
18 | if (reporters) {
19 | process.env.KARMA_REPORTERS = reporters;
20 | process.env.PROTRACTOR_REPORTERS = reporters;
21 | }
22 |
23 | Helpers.config = {
24 | pkg: grunt.file.readJSON('./package.json'),
25 | env: process.env
26 | };
27 |
28 | Helpers.loadConfig = function(path) {
29 | var glob = require('glob');
30 | var object = {};
31 | var key = null;
32 |
33 | glob.sync('*', { cwd: path }).forEach(function(option) {
34 | key = option.replace(/\.js$/, '');
35 | object[key] = require('../' + path + option);
36 | });
37 |
38 | return object;
39 | };
40 |
41 | Helpers.cleanupModules = function(src, filepath) {
42 | /* Normalize line-feeds */
43 | src = grunt.util.normalizelf(src);
44 |
45 | /* Remove jshint comments */
46 | src = src.replace(/[\s]*\/\* (jshint|global).*\n/g, '');
47 |
48 | /* Trim */
49 | src = src.replace(/^\s+|\s+$/g, '');
50 |
51 | /* Indent */
52 | src = src.split(lf).map(function(line) {
53 | return ' ' + line;
54 | }).join(lf);
55 |
56 | return ' // ' + filepath + lf + src;
57 | };
58 |
59 | Helpers.getTemplate = function(name) {
60 | return fs.readFileSync('./tasks/templates/' + name + '.tpl', 'utf8');
61 | };
62 |
63 | function getScripts(env) {
64 | var scripts = '';
65 | var tag = '\n';
66 | require('./files').environments[env].forEach(function(fileGlobs) {
67 | glob.sync(fileGlobs).forEach(function(file) {
68 | scripts += tag.replace(':src', '/' + file);
69 | });
70 | });
71 |
72 | return scripts;
73 | }
74 |
75 | function getStyles() {
76 | var styles = '';
77 | var tag = ' instead of
');
229 | element = compiled.element;
230 | $parentScope = compiled.parentScope;
231 | context.element = element;
232 | context.$parentScope = $parentScope;
233 | });
234 |
235 | describe('with an image path set on model', function() {
236 | beforeEach(function() {
237 | $parentScope.$apply(function() {
238 | $parentScope.image = 'some/image/path.jpg';
239 | });
240 | });
241 |
242 | it('should set the path as source', function() {
243 | expect($parentScope.image.src).toEqual('some/image/path.jpg');
244 | });
245 | });
246 |
247 | describe('image selection canceled', function() {
248 | beforeEach(function() {
249 | element.prop('files', [undefined]);
250 | element.triggerHandler('change');
251 | });
252 |
253 | it('should not set the data url', function() {
254 | expect($parentScope.image).toBeUndefined();
255 | });
256 | });
257 |
258 | describe('with an image with a specified (mocked) mimetype selected', function() {
259 | testSelectUnselectWorks('image/mockedpng', context);
260 | });
261 |
262 | describe('with an image with a specified (mocked and asterisk suffixed) mimetype selected', function() {
263 | testSelectUnselectWorks('mockprefix/whatever', context);
264 | });
265 |
266 | describe('with an image selected', function() {
267 | testPNGFile(context);
268 | });
269 |
270 | describe('with a non-image file selected', function() {
271 | testTextFile(context);
272 | });
273 | });
274 |
275 | describe('previewImage directive', function() {
276 | describe('with dimension restrictions set to true', function() {
277 | var context = {};
278 | beforeEach(function() {
279 | // using instead of
');
283 | context.element = compiled.element;
284 | context.$parentScope = compiled.parentScope;
285 | });
286 |
287 | describe('with an image selected', function() {
288 | testPNGFile(context);
289 | });
290 |
291 | describe('with a non-image file selected', function() {
292 | testTextFile(context);
293 | });
294 | });
295 |
296 | describe('with dimension restrictions set to false', function() {
297 | var context = {};
298 | beforeEach(function() {
299 | // using instead of
');
303 | context.element = compiled.element;
304 | context.$parentScope = compiled.parentScope;
305 | });
306 |
307 | describe('with an image selected', function() {
308 | testDimensionsCheckFails(context);
309 | });
310 |
311 | describe('with a non-image file selected', function() {
312 | testTextFile(context);
313 | });
314 | });
315 |
316 | describe('with dimension restrictions which will evaluate to false', function() {
317 | var context = {};
318 | beforeEach(function() {
319 | // using instead of
');
323 | context.element = compiled.element;
324 | context.$parentScope = compiled.parentScope;
325 | });
326 |
327 | describe('with an image selected', function() {
328 | testDimensionsCheckFails(context);
329 | });
330 |
331 | describe('with a non-image file selected', function() {
332 | testTextFile(context);
333 | });
334 | });
335 |
336 | describe('with dimension restrictions which will evaluate to true', function() {
337 | var context = {};
338 | beforeEach(function() {
339 | // using instead of
');
343 | context.element = compiled.element;
344 | context.$parentScope = compiled.parentScope;
345 | });
346 |
347 | describe('with an image selected', function() {
348 | testPNGFile(context);
349 | });
350 |
351 | describe('with a non-image file selected', function() {
352 | testTextFile(context);
353 | });
354 | });
355 |
356 | describe('with dimension restriction with multiple height/width var replacements', function() {
357 | var context = {};
358 | beforeEach(function() {
359 | // using instead of
');
364 | context.element = compiled.element;
365 | context.$parentScope = compiled.parentScope;
366 | });
367 |
368 | describe('with an image selected', function() {
369 | testPNGFile(context);
370 | });
371 |
372 | describe('with a non-image file selected', function() {
373 | testTextFile(context);
374 | });
375 | });
376 |
377 | describe('with size restrictions which will evaluate to false', function() {
378 | var context = {};
379 | beforeEach(function() {
380 | // using instead of
');
384 | context.element = compiled.element;
385 | context.$parentScope = compiled.parentScope;
386 | });
387 |
388 | describe('with an image selected', function() {
389 | testSizeCheckFails(context);
390 | });
391 |
392 | describe('with a non-image file selected', function() {
393 | testTextFile(context);
394 | });
395 | });
396 |
397 | describe('with size restrictions which will evaluate to true', function() {
398 | var context = {};
399 | beforeEach(function() {
400 | // using instead of
');
404 | context.element = compiled.element;
405 | context.$parentScope = compiled.parentScope;
406 | });
407 |
408 | describe('with an image selected', function() {
409 | testPNGFile(context);
410 | });
411 |
412 | describe('with a non-image file selected', function() {
413 | testTextFile(context);
414 | });
415 | });
416 | });
417 |
418 | describe('previewImage directive', function() {
419 | var context = {};
420 | beforeEach(function() {
421 | // using instead of
');
425 | context.element = compiled.element;
426 | context.$parentScope = compiled.parentScope;
427 | });
428 |
429 | describe('with an image selected', function() {
430 | testPNGFile(context);
431 | });
432 |
433 | describe('with a non-image file selected', function() {
434 | testTextFile(context);
435 | });
436 | });
437 | });
438 |
--------------------------------------------------------------------------------
/test/unit/setupSpec.js:
--------------------------------------------------------------------------------
1 | describe('Setup', function() {
2 | 'use strict';
3 |
4 | it('should be able to execute tests.', function() {
5 | expect(true).toBe(true);
6 | });
7 |
8 | it('should have angular defined.', function() {
9 | expect(angular).toBeDefined();
10 | });
11 |
12 | it('should use jasmine 2.0 done callbacks', function(done) {
13 | expect(window.waitsFor).toBeUndefined();
14 | window.setTimeout(done, 10);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------