catalog-ui/src/app/ng2/components/ui/upload-artifact/upload-artifact.component.ts

   1 /*
   2  * ============LICENSE_START=======================================================
   3  *  Copyright (C) 2023 Nordix Foundation
   4  *  ================================================================================
   5  *  Licensed under the Apache License, Version 2.0 (the "License");
   6  *  you may not use this file except in compliance with the License.
   7  *  You may obtain a copy of the License at
   8  *
   9  *        http://www.apache.org/licenses/LICENSE-2.0
  10  *  Unless required by applicable law or agreed to in writing, software
  11  *  distributed under the License is distributed on an "AS IS" BASIS,
  12  *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  *  See the License for the specific language governing permissions and
  14  *  limitations under the License.
  15  *
  16  *  SPDX-License-Identifier: Apache-2.0
  17  *  ============LICENSE_END=========================================================
  18  */
  19
  20 import { Component, EventEmitter, Input, Output } from "@angular/core";
  21 import { ArtifactModel } from "app/models";
  22 import { TranslateService } from '../../../shared/translator/translate.service';
  23 import { SdcUiServices } from 'onap-ui-angular';
  24
  25 @Component({
  26     selector: 'upload-artifact',
  27     template: `
  28         <svg-icon
  29         [mode]="'primary2'"
  30         [disabled]="disabled"
  31         [clickable]="!disabled"
  32         [name]="iconType"
  33         [testId]="testId" mode="info"
  34         (click)="fileUpload.click()"
  35         clickable="true"
  36         size="medium"
  37     ></svg-icon>
  38     <input
  39         type="file"
  40         style="display: none;"
  41         [disabled]="disabled"
  42         (change)="onFileSelect($event)"
  43         [accept]="extensionsWithDot"
  44         #fileUpload>
  45 `
  46 })
  47 export class UploadArtifactComponent {
  48
  49     @Input() extensions: string;
  50     @Input() artifact: ArtifactModel;
  51     @Input() isInstance: boolean;
  52     @Input() uploadIconClass: string;
  53     @Input() componentType: string;
  54     @Input() componentId: string;
  55     @Input() testId: string;
  56     @Input() disabled: boolean;
  57     @Output("onFileUpload") onFileUpload: EventEmitter<any> = new EventEmitter<any>();
  58
  59     public extensionsWithDot: string;
  60     public iconType:string = "upload-o";
  61
  62     constructor(
  63         private modalService: SdcUiServices.ModalService,
  64         private translateService: TranslateService) {
  65
  66     }
  67
  68     ngOnInit () {
  69         this.extensionsWithDot = this.getExtensionsWithDot(this.extensions);
  70     }
  71
  72     public getExtensionsWithDot(extensions:string):string {
  73         extensions = extensions || '';
  74         return extensions.split(',')
  75             .map(ext => '.' + ext.toString())
  76             .join(',');
  77     }
  78
  79     public onFileSelect(event) {
  80         const file = event.target.files[0];
  81         if (file && file.name) {
  82             const fileExtension: string = file.name.split('.').pop();
  83             if (this.extensionsWithDot.includes(fileExtension.toLowerCase())) {
  84                 this.onFileUpload.emit(file);
  85             } else {
  86                 const title: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS_TITLE');
  87                 const message: string = this.translateService.translate('NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS', {extensions: this.extensionsWithDot});
  88                 this.modalService.openWarningModal(title, message, 'error-invalid-tosca-ext');
  89             }
  90         }
  91     }
  92 }