aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/directives/file-upload
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
committerMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
commited64b5edff15e702493df21aa3230b81593e6133 (patch)
treea4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/directives/file-upload
parent280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff)
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/directives/file-upload')
-rw-r--r--catalog-ui/src/app/directives/file-upload/file-upload.html23
-rw-r--r--catalog-ui/src/app/directives/file-upload/file-upload.less75
-rw-r--r--catalog-ui/src/app/directives/file-upload/file-upload.ts130
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'];