diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/file-upload')
3 files changed, 231 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/file-upload/file-upload.html b/catalog-ui/app/scripts/directives/file-upload/file-upload.html new file mode 100644 index 0000000000..7cbc8d25f3 --- /dev/null +++ b/catalog-ui/app/scripts/directives/file-upload/file-upload.html @@ -0,0 +1,22 @@ +<div class="i-sdc-form-item i-sdc-form-file-upload"> + <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || defaultText}}</span> + <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div> + <label class="i-sdc-form-file-upload-label"> + <input + type="file" + name="{{elementName}}" + ng-model="myFileModel" + base-sixty-four-input + accept="{{getExtensionsWithDot()}}" + file-type="{{extensions}}" + data-ng-change="onFileChange()" + onchange="angular.element(this).scope().setEmptyError(this)" + onclick="angular.element(this).scope().onFileClick(this)" + data-ng-required="{{elementRequired}}" + data-ng-disabled="elementDisabled==='true'" + data-tests-id="browseButton" + maxsize="10240" + /> + <div class="file-upload-browse-btn" data-ng-class="{'disabled':elementDisabled==='true'}">Browse</div> + </label> +</div> diff --git a/catalog-ui/app/scripts/directives/file-upload/file-upload.less b/catalog-ui/app/scripts/directives/file-upload/file-upload.less new file mode 100644 index 0000000000..1c4b010853 --- /dev/null +++ b/catalog-ui/app/scripts/directives/file-upload/file-upload.less @@ -0,0 +1,75 @@ +.i-sdc-form-file-upload { + + display: flex; + margin-top: 0; + width: 100%; + .p_1; + .bg_c; + .border-radius(2px); + border: solid 1px @border_color_f; + height: 30px; + + input[type="file"] { + cursor: inherit; + display: block; + filter: alpha(opacity=0); + width: 100px; + height: 30px; + opacity: 0; + position: absolute; + right: 0; + text-align: right; + top: 0; + } + + .i-sdc-form-file-name{ + flex-grow: 999; + text-align: left; + padding: 3px 10px; + opacity: 0.6; + width: 80%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + } + + .i-sdc-form-file-upload-x-btn{ + flex-grow: 1; + .sprite; + .sprite.small-x-btn-black; + cursor: pointer; + top: 10px; + right: 9px; + width: 10px; + position: relative; + } + .i-sdc-form-file-upload-label { + float: right; + width: 100px; + height: 100%; + .bg_n; + .b_9; + + .file-upload-browse-btn { + .noselect; + padding: 4px 6px; + cursor: pointer; + z-index: 999; + position: absolute; + width: 100px; + height: 28px; + text-align: center; + + &.disabled { + cursor: default; + } + } + } + + &.error { + border-color: #da1f3d; + outline: none; + box-sizing: border-box; + } +} diff --git a/catalog-ui/app/scripts/directives/file-upload/file-upload.ts b/catalog-ui/app/scripts/directives/file-upload/file-upload.ts new file mode 100644 index 0000000000..16db3e7e21 --- /dev/null +++ b/catalog-ui/app/scripts/directives/file-upload/file-upload.ts @@ -0,0 +1,134 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * ============LICENSE_END========================================================= + */ +/** + * Created by obarda on 1/27/2016. + */ +/// <reference path="../../references"/> +module Sdc.Directives { + 'use strict'; + + export class FileUploadModel { + filetype: string; + filename: string; + filesize: number; + base64: string; + } + + export interface IFileUploadScope extends ng.IScope { + fileModel: FileUploadModel; + formElement:ng.IFormController; + extensions: string; + elementDisabled: string; + elementName: string; + elementRequired: string; + myFileModel: any; // From the ng bind to <input type=file + defaultText: string; + onFileChangedInDirective:Function; + + getExtensionsWithDot():string; + onFileChange():void + onFileClick(element:any):void; + setEmptyError(element):void; + validateField(field:any):boolean; + cancel():void; + } + + + export class FileUploadDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService, private sdcConfig:Models.IAppConfigurtaion) { + } + + scope = { + fileModel: '=', + formElement: '=', + extensions: '@', + elementDisabled: '@', + elementName: '@', + elementRequired: '@', + onFileChangedInDirective: '=?', + defaultText: '=', + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/file-upload/file-upload.html'); + }; + + link = (scope:IFileUploadScope, element:any, $attr:any) => { + + // In case the browse has filename, set it valid. + // When editing artifact the file is not sent again, so if we have filename I do not want to show error. + if (scope.fileModel && scope.fileModel.filename && scope.fileModel.filename!==''){ + scope.formElement[scope.elementName].$setValidity('required', true); + } + + scope.getExtensionsWithDot = ():string => { + let ret = []; + if(scope.extensions) { + _.each(scope.extensions.split(','), function (item) { + ret.push("." + item.toString()); + }); + } + return ret.join(","); + }; + + scope.onFileChange = ():void => { + if (scope.onFileChangedInDirective) { + scope.onFileChangedInDirective(); + } + if (scope.myFileModel) { + scope.fileModel = scope.myFileModel; + scope.formElement[scope.elementName].$setValidity('required', true); + } + }; + + scope.setEmptyError = (element):void => { + if(element.files[0].size){ + scope.formElement[scope.elementName].$setValidity('emptyFile', true); + }else{ + scope.formElement[scope.elementName].$setValidity('emptyFile', false); + scope.fileModel = undefined; + } + + }; + + // Workaround, in case user select a file then cancel (X) then select the file again, the event onChange is not fired. + // This is a workaround to fix this issue. + scope.onFileClick = (element:any):void => { + element.value = null; + }; + + scope.cancel = ():void => { + scope.fileModel.filename = ''; + scope.formElement[scope.elementName].$pristine; + scope.formElement[scope.elementName].$setValidity('required', false); + } + }; + + public static factory = ($templateCache:ng.ITemplateCacheService, sdcConfig:Models.IAppConfigurtaion)=> { + return new FileUploadDirective($templateCache, sdcConfig); + }; + + } + + FileUploadDirective.factory.$inject = ['$templateCache', 'sdcConfig']; +} |