diff options
Diffstat (limited to 'catalog-ui/src/app/directives/file-upload')
3 files changed, 228 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/file-upload/file-upload.html b/catalog-ui/src/app/directives/file-upload/file-upload.html new file mode 100644 index 0000000000..a69340d0ba --- /dev/null +++ b/catalog-ui/src/app/directives/file-upload/file-upload.html @@ -0,0 +1,23 @@ +<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)" + on-after-validate="onAfterValidate" + 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/src/app/directives/file-upload/file-upload.less b/catalog-ui/src/app/directives/file-upload/file-upload.less new file mode 100644 index 0000000000..1c4b010853 --- /dev/null +++ b/catalog-ui/src/app/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/src/app/directives/file-upload/file-upload.ts b/catalog-ui/src/app/directives/file-upload/file-upload.ts new file mode 100644 index 0000000000..63a6f08062 --- /dev/null +++ b/catalog-ui/src/app/directives/file-upload/file-upload.ts @@ -0,0 +1,130 @@ +/** + * Created by obarda on 1/27/2016. + */ +'use strict'; +import {IAppConfigurtaion} from "app/models"; + +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; + onAfterValidate():void; + setEmptyError(element):void; + validateField(field:any):boolean; + cancel():void; +} + + +export class FileUploadDirective implements ng.IDirective { + + constructor(private sdcConfig:IAppConfigurtaion) { + } + + scope = { + fileModel: '=', + formElement: '=', + extensions: '@', + elementDisabled: '@', + elementName: '@', + elementRequired: '@', + onFileChangedInDirective: '=?', + defaultText: '=', + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./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; + } + + }; + + // Prevent case-sensitivity in the upload-file accept parameter + // Workaround for github issue: https://github.com/adonespitogo/angular-base64-upload/issues/81 + scope.onAfterValidate = () => { + if (!scope.formElement[scope.elementName].$valid && scope.extensions) { + let uploadfileExtension:string = scope.fileModel.filename.split('.').pop().toLowerCase(); + if (scope.extensions.split(',').indexOf(uploadfileExtension) > -1) { + scope.formElement[scope.elementName].$setValidity('accept', true); + } + } + // Adding fix for cases when we're changing file type for upload from file that requires certain + // extensions to a file that don't requires any extensions + if (!scope.formElement[scope.elementName].$valid && scope.formElement[scope.elementName].$error.accept && scope.extensions === "") { + scope.formElement[scope.elementName].$setValidity('accept', true); + } + }; + + // 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 = (sdcConfig:IAppConfigurtaion)=> { + return new FileUploadDirective(sdcConfig); + }; + +} + +FileUploadDirective.factory.$inject = [ 'sdcConfig']; |