catalog-ui/src/app/directives/file-upload/file-upload.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   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
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  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  * ============LICENSE_END=========================================================
  19  */
  20
  21 /**
  22  * Created by obarda on 1/27/2016.
  23  */
  24 'use strict';
  25 import {IAppConfigurtaion} from "app/models";
  26
  27 export class FileUploadModel {
  28     filetype:string;
  29     filename:string;
  30     filesize:number;
  31     base64:string;
  32 }
  33
  34 export interface IFileUploadScope extends ng.IScope {
  35     fileModel:FileUploadModel;
  36     formElement:ng.IFormController;
  37     extensions:string;
  38     elementDisabled:string;
  39     elementName:string;
  40     elementRequired:string;
  41     myFileModel:any; // From the ng bind to <input type=file
  42     defaultText:string;
  43     onFileChangedInDirective:Function;
  44
  45     getExtensionsWithDot():string;
  46     onFileChange():void
  47     onFileClick(element:any):void;
  48     onAfterValidate():void;
  49     setEmptyError(element):void;
  50     validateField(field:any):boolean;
  51     cancel():void;
  52 }
  53
  54
  55 export class FileUploadDirective implements ng.IDirective {
  56
  57     constructor(private sdcConfig:IAppConfigurtaion) {
  58     }
  59
  60     scope = {
  61         fileModel: '=',
  62         formElement: '=',
  63         extensions: '@',
  64         elementDisabled: '@',
  65         elementName: '@',
  66         elementRequired: '@',
  67         onFileChangedInDirective: '=?',
  68         defaultText: '=',
  69     };
  70
  71     restrict = 'E';
  72     replace = true;
  73     template = ():string => {
  74         return require('./file-upload.html');
  75     };
  76
  77     link = (scope:IFileUploadScope, element:any, $attr:any) => {
  78
  79         // In case the browse has filename, set it valid.
  80         // When editing artifact the file is not sent again, so if we have filename I do not want to show error.
  81         if (scope.fileModel && scope.fileModel.filename && scope.fileModel.filename !== '') {
  82             scope.formElement[scope.elementName].$setValidity('required', true);
  83         }
  84
  85         scope.getExtensionsWithDot = ():string => {
  86             let ret = [];
  87             if (scope.extensions) {
  88                 _.each(scope.extensions.split(','), function (item) {
  89                     ret.push("." + item.toString());
  90                 });
  91             }
  92             return ret.join(",");
  93         };
  94
  95         scope.onFileChange = ():void => {
  96             if (scope.onFileChangedInDirective) {
  97                 scope.onFileChangedInDirective();
  98             }
  99             if (scope.myFileModel) {
 100                 scope.fileModel = scope.myFileModel;
 101                 scope.formElement[scope.elementName].$setValidity('required', true);
 102             }
 103         };
 104
 105         scope.setEmptyError = (element):void => {
 106             if (element.files[0].size) {
 107                 scope.formElement[scope.elementName].$setValidity('emptyFile', true);
 108             } else {
 109                 scope.formElement[scope.elementName].$setValidity('emptyFile', false);
 110                 scope.fileModel = undefined;
 111             }
 112
 113         };
 114
 115         // Prevent case-sensitivity in the upload-file accept parameter
 116         // Workaround for github issue: https://github.com/adonespitogo/angular-base64-upload/issues/81
 117         scope.onAfterValidate = () => {
 118             if (!scope.formElement[scope.elementName].$valid && scope.extensions) {
 119                 let uploadfileExtension:string = scope.fileModel.filename.split('.').pop().toLowerCase();
 120                 if (scope.extensions.split(',').indexOf(uploadfileExtension) > -1) {
 121                     scope.formElement[scope.elementName].$setValidity('accept', true);
 122                 }
 123             }
 124                 // Adding fix for cases when we're changing file type for upload from file that requires certain
 125                 // extensions to a file that don't requires any extensions
 126                 if (!scope.formElement[scope.elementName].$valid && scope.formElement[scope.elementName].$error.accept && scope.extensions === "") {
 127                     scope.formElement[scope.elementName].$setValidity('accept', true);
 128                 }
 129         };
 130
 131         // Workaround, in case user select a file then cancel (X) then select the file again, the event onChange is not fired.
 132         // This is a workaround to fix this issue.
 133         scope.onFileClick = (element:any):void => {
 134             element.value = null;
 135         };
 136
 137         scope.cancel = ():void => {
 138             scope.fileModel.filename = '';
 139             scope.formElement[scope.elementName].$pristine;
 140             scope.formElement[scope.elementName].$setValidity('required', false);
 141         }
 142     };
 143
 144     public static factory = (sdcConfig:IAppConfigurtaion)=> {
 145         return new FileUploadDirective(sdcConfig);
 146     };
 147
 148 }
 149
 150 FileUploadDirective.factory.$inject = [ 'sdcConfig'];