2 * ================================================================================
4 * ================================================================================
5 * Copyright (C) 2017 AT&T Intellectual Property
6 * ================================================================================
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
11 * http://www.apache.org/licenses/LICENSE-2.0
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ================================================================================
23 angular.module('ecompApp').directive('imageUpload', function factory($q) {
24 var imageMimeRgx = /^image\/[a-zA-Z0-9]*$/;
26 var URL = window.URL || window.webkitURL;
28 var getResizeArea = function () {
29 var resizeAreaId = 'fileupload-resize-area';
31 var resizeArea = document.getElementById(resizeAreaId);
34 resizeArea = document.createElement('canvas');
35 resizeArea.id = resizeAreaId;
36 resizeArea.style.visibility = 'hidden';
37 document.body.appendChild(resizeArea);
43 var resizeImage = function (origImage, options) {
44 var maxHeight = options.resizeMaxHeight || 300;
45 var maxWidth = options.resizeMaxWidth || 250;
46 var quality = options.resizeQuality || 0.7;
47 var type = options.resizeType || 'image/jpg';
49 var canvas = getResizeArea();
51 var height = origImage.height;
52 var width = origImage.width;
54 //image redraw starting points
57 // calculate the width and height, constraining the proportions
59 if (width > maxWidth) {
60 height = Math.round(height *= maxWidth / width);
64 y0 = Math.round((maxHeight - height)/2);
72 if (height > maxHeight) {
73 width = Math.round(width *= maxHeight / height);
76 x0 = Math.round((maxWidth - width)/2);
86 canvas.width = maxWidth;
87 canvas.height = maxHeight;
89 //draw image on canvas
90 var ctx = canvas.getContext("2d");
92 //set background color
93 if(options.backgroundColor){
94 ctx.fillStyle = options.backgroundColor;
95 ctx.fillRect(0,0,maxWidth,maxHeight);
99 ctx.drawImage(origImage, x0, y0, width, height);
101 // get the data from canvas as 70% jpg (or specified type).
102 return canvas.toDataURL(type, quality);
105 var createImage = function(url, callback) {
106 var image = new Image();
107 image.onload = function() {
113 var fileToDataURL = function (file) {
114 var deferred = $q.defer();
115 var reader = new FileReader();
116 reader.onload = function (e) {
117 deferred.resolve(e.target.result);
119 reader.readAsDataURL(file);
120 return deferred.promise;
127 image: '=imageUpload',
128 resizeMaxHeight: '@?imageUploadResizeMaxHeight',
129 resizeMaxWidth: '@?imageUploadResizeMaxWidth',
130 resizeQuality: '@?imageUploadResizeQuality',
131 resizeType: '@?imageUploadResizeType',
132 imageApi: '=?imageUploadApi',
133 backgroundColor: '@?imageUploadBackgroundColor'
135 compile: function compile(tElement, tAttrs, transclude) {
136 return function postLink(scope, iElement, iAttrs, formCtrl) {
137 var doResizing = function(imageResult, callback) {
138 createImage(imageResult.url, function(image) {
139 var dataURL = resizeImage(image, scope);
140 imageResult.resized = {
142 type: dataURL.match(/:(.+\/.+);/)[1]
144 callback(imageResult);
148 var applyScope = function(imageResult) {
149 scope.$apply(function() {
150 //console.log(imageResult);
152 scope.image.push(imageResult);
154 scope.image = imageResult;
158 iElement.bind('change', function (evt) {
159 //when multiple always return an array of images
163 var files = evt.target.files;
164 for(var i = 0; i < files.length; i++) {
165 setInputValidity(files[i]);
167 //create a result object for each file in files
170 url: URL.createObjectURL(files[i])
173 fileToDataURL(files[i]).then(function (dataURL) {
174 imageResult.dataURL = dataURL;
177 if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image
178 doResizing(imageResult, function(imageResult) {
179 applyScope(imageResult);
183 applyScope(imageResult);
188 //API for otter actions
189 scope.imageApi = scope.imageApi || {};
190 scope.imageApi.clearFile = () => {
191 iElement[0].value = "";
196 let setInputValidity = file => {
197 //if form validation supported
199 if(formCtrl && iAttrs.name && formCtrl[iAttrs.name]){
200 formCtrl[iAttrs.name].$setDirty();
201 if(file && file.type && !imageMimeRgx.test(file.type)){
203 formCtrl[iAttrs.name].$setValidity('mimeType', false);
207 if(file && file.size && file.size > 1000000){
209 formCtrl[iAttrs.name].$setValidity('imageSize', false);
214 formCtrl[iAttrs.name].$setValidity('mimeType', true);
215 formCtrl[iAttrs.name].$setValidity('imageSize', true);