diff options
Diffstat (limited to 'ecomp-portal-FE/client/app/directives/image-upload/image-upload.directive.js')
| -rw-r--r-- | ecomp-portal-FE/client/app/directives/image-upload/image-upload.directive.js | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/app/directives/image-upload/image-upload.directive.js b/ecomp-portal-FE/client/app/directives/image-upload/image-upload.directive.js new file mode 100644 index 00000000..90c88c50 --- /dev/null +++ b/ecomp-portal-FE/client/app/directives/image-upload/image-upload.directive.js @@ -0,0 +1,222 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ================================================================================ + */ + +'use strict'; + +angular.module('ecompApp').directive('imageUpload', function factory($q) { + var imageMimeRgx = /^image\/[a-zA-Z0-9]*$/; + + var URL = window.URL || window.webkitURL; + + var getResizeArea = function () { + var resizeAreaId = 'fileupload-resize-area'; + + var resizeArea = document.getElementById(resizeAreaId); + + if (!resizeArea) { + resizeArea = document.createElement('canvas'); + resizeArea.id = resizeAreaId; + resizeArea.style.visibility = 'hidden'; + document.body.appendChild(resizeArea); + } + + return resizeArea; + }; + + var resizeImage = function (origImage, options) { + var maxHeight = options.resizeMaxHeight || 300; + var maxWidth = options.resizeMaxWidth || 250; + var quality = options.resizeQuality || 0.7; + var type = options.resizeType || 'image/jpg'; + + var canvas = getResizeArea(); + + var height = origImage.height; + var width = origImage.width; + + //image redraw starting points + var x0, y0; + + // calculate the width and height, constraining the proportions + if (width > height) { + if (width > maxWidth) { + height = Math.round(height *= maxWidth / width); + width = maxWidth; + + x0 = 0; + y0 = Math.round((maxHeight - height)/2); + }else{ + maxHeight = height; + maxWidth = width; + x0 = 0; + y0 = 0; + } + } else { + if (height > maxHeight) { + width = Math.round(width *= maxHeight / height); + height = maxHeight; + + x0 = Math.round((maxWidth - width)/2); + y0 = 0; + }else{ + maxHeight = height; + maxWidth = width; + x0 = 0; + y0 = 0; + } + } + + canvas.width = maxWidth; + canvas.height = maxHeight; + + //draw image on canvas + var ctx = canvas.getContext("2d"); + + //set background color + if(options.backgroundColor){ + ctx.fillStyle = options.backgroundColor; + ctx.fillRect(0,0,maxWidth,maxHeight); + } + + + ctx.drawImage(origImage, x0, y0, width, height); + + // get the data from canvas as 70% jpg (or specified type). + return canvas.toDataURL(type, quality); + }; + + var createImage = function(url, callback) { + var image = new Image(); + image.onload = function() { + callback(image); + }; + image.src = url; + }; + + var fileToDataURL = function (file) { + var deferred = $q.defer(); + var reader = new FileReader(); + reader.onload = function (e) { + deferred.resolve(e.target.result); + }; + reader.readAsDataURL(file); + return deferred.promise; + }; + + return { + restrict: 'A', + require: '^form', + scope: { + image: '=imageUpload', + resizeMaxHeight: '@?imageUploadResizeMaxHeight', + resizeMaxWidth: '@?imageUploadResizeMaxWidth', + resizeQuality: '@?imageUploadResizeQuality', + resizeType: '@?imageUploadResizeType', + imageApi: '=?imageUploadApi', + backgroundColor: '@?imageUploadBackgroundColor' + }, + compile: function compile(tElement, tAttrs, transclude) { + return function postLink(scope, iElement, iAttrs, formCtrl) { + var doResizing = function(imageResult, callback) { + createImage(imageResult.url, function(image) { + var dataURL = resizeImage(image, scope); + imageResult.resized = { + dataURL: dataURL, + type: dataURL.match(/:(.+\/.+);/)[1] + }; + callback(imageResult); + }); + }; + + var applyScope = function(imageResult) { + scope.$apply(function() { + //console.log(imageResult); + if(iAttrs.multiple) + scope.image.push(imageResult); + else + scope.image = imageResult; + }); + }; + + iElement.bind('change', function (evt) { + //when multiple always return an array of images + if(iAttrs.multiple) + scope.image = []; + + var files = evt.target.files; + for(var i = 0; i < files.length; i++) { + setInputValidity(files[i]); + + //create a result object for each file in files + var imageResult = { + file: files[i], + url: URL.createObjectURL(files[i]) + }; + + fileToDataURL(files[i]).then(function (dataURL) { + imageResult.dataURL = dataURL; + }); + + if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image + doResizing(imageResult, function(imageResult) { + applyScope(imageResult); + }); + } + else { //no resizing + applyScope(imageResult); + } + } + }); + + //API for otter actions + scope.imageApi = scope.imageApi || {}; + scope.imageApi.clearFile = () => { + iElement[0].value = ""; + setInputValidity(); + }; + + + let setInputValidity = file => { + //if form validation supported + + if(formCtrl && iAttrs.name && formCtrl[iAttrs.name]){ + formCtrl[iAttrs.name].$setDirty(); + if(file && file.type && !imageMimeRgx.test(file.type)){ + //set form invalid + formCtrl[iAttrs.name].$setValidity('mimeType', false); + applyScope(); + return; + } + if(file && file.size && file.size > 1000000){ + //set form invalid + formCtrl[iAttrs.name].$setValidity('imageSize', false); + applyScope(); + return; + } + //set valid + formCtrl[iAttrs.name].$setValidity('mimeType', true); + formCtrl[iAttrs.name].$setValidity('imageSize', true); + } + + } + } + } + } +}); |