+++ /dev/null
-/*-
- * ================================================================================
- * 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);
- }
-
- }
- }
- }
- }
-});
Code Review / portal.git / blobdiff