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