6 files changed, 107 insertions, 14 deletions
diff --git a/src/angular/buttons/button-file-opener.component.html.ts b/src/angular/buttons/button-file-opener.component.html.ts
new file mode 100644
index 0000000..dd24be3
--- /dev/null
+++ b/src/angular/buttons/button-file-opener.component.html.ts
@@ -0,0 +1,18 @@
+export const template = `
+<div (click)="fileOpener.click()" 
+     class="sdc-button sdc-button__{{ type }} btn-{{ size }} {{ iconPositionClass }}"
+     [attr.data-tests-id]="testId"
+     >
+    {{ text }}
+    <input
+        #fileOpener
+        type="file"
+        [accept]="allowedExtensions" 
+        [disabled] = "disabled"
+        (change)="onFileSelect($event)"
+        base-sixty-four-input
+    />
+</div>
+`;
+
+// base-sixty-four-input
diff --git a/src/angular/buttons/button-file-opener.component.ts b/src/angular/buttons/button-file-opener.component.ts
new file mode 100644
index 0000000..399eb9a
--- /dev/null
+++ b/src/angular/buttons/button-file-opener.component.ts
@@ -0,0 +1,61 @@
+import { Component, Input, Output, EventEmitter, HostBinding, ViewChild, AfterViewInit } from '@angular/core';
+import { ButtonComponent } from './button.component';
+import { template } from "./button-file-opener.component.html";
+
+export class FileObject {
+    filesize: string;
+    filetype: string;
+    filename: string;
+    base64: string;
+}
+
+@Component({
+    selector: "sdc-button-file-opener",
+    template: template,
+    styles: [`
+        input[type=file] {
+            display: none;
+        }
+    `]
+})
+export class ButtonFileOpenerComponent extends ButtonComponent implements AfterViewInit {
+
+    @Input() public extensions: string;
+    @Output() public fileUpload: EventEmitter<any>;
+    @HostBinding('class.sdc-button__wrapper') true;
+
+    public allowedExtensions: string;
+    private fileObject: FileObject;
+
+    constructor() {
+        super();
+        this.fileUpload = new EventEmitter<any>();
+        this.fileObject = new FileObject();
+    }
+
+    ngAfterViewInit() : void {
+        this.allowedExtensions = this.extensions && this.extensions.split(',').map(x => '.' + x).join(',');
+    }
+
+    public onFileSelectaa(event): void {
+        let file = event.srcElement.files[0];
+        debugger
+        this.fileUpload.emit({file: file});
+    }
+
+    public onFileSelect(e): void {
+        var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
+        var reader = new FileReader();
+        this.fileObject.filesize = file.size;
+        this.fileObject.filetype = file.type;
+        this.fileObject.filename = file.name;
+        reader.onload = this._handleReaderLoaded.bind(this);
+        reader.readAsDataURL(file);
+    }
+    private _handleReaderLoaded(e) {
+        let base64 = e.target.result;
+        this.fileObject.base64 = base64.split('base64,')[1];
+        this.fileUpload.emit(this.fileObject);
+    }
+
+}
diff --git a/src/angular/buttons/button.component.html.ts b/src/angular/buttons/button.component.html.ts
index f903fd1..33a630a 100644
--- a/src/angular/buttons/button.component.html.ts
+++ b/src/angular/buttons/button.component.html.ts
@@ -1,11 +1,11 @@
-export default `
+export const template = `
 <button class="sdc-button sdc-button__{{ type }} btn-{{ size }} {{ iconPositionClass }}"
         [disabled] = "disabled || show_spinner"
         [attr.data-tests-id]="testId">
         <svg-icon
                 *ngIf="icon_name"
                 [name]="icon_name"
-                [mode]="iconMode"
+                [mode]="type"
                 [size]="'medium'"
                 >
         </svg-icon>
diff --git a/src/angular/buttons/button.component.ts b/src/angular/buttons/button.component.ts
index 1f049dc..d57c5f1 100644
--- a/src/angular/buttons/button.component.ts
+++ b/src/angular/buttons/button.component.ts
@@ -1,16 +1,17 @@
 import { Component, HostBinding, Input, OnInit } from "@angular/core";
-import { Placement } from "../common/enums";
-import template from "./button.component.html";
+import { Placement, ButtonType } from "../common/enums";
+import { IButtonComponent } from './ibutton.interface';
+import { template } from "./button.component.html";
 
 @Component({
     selector: "sdc-button",
     template: template
 })
 
-export class ButtonComponent implements OnInit {
+export class ButtonComponent implements OnInit, IButtonComponent {
     @Input() public text: string;
     @Input() public disabled: boolean;
-    @Input() public type: string;
+    @Input() public type: ButtonType;
     @Input() public size: string;
     @Input() public preventDoubleClick: boolean;
     @Input() public icon_name: string;
@@ -21,21 +22,18 @@ export class ButtonComponent implements OnInit {
 
     public placement = Placement;
     private lastClick: Date;
-    private iconPositionClass: string;
-    private iconMode: string;
+    public iconPositionClass: string;
 
     @HostBinding('class.sdc-button__wrapper') true;
 
     constructor() {
-        this.type = "primary";
+        this.type = ButtonType.primary;
         this.size = "default";
         this.disabled = false;
-        this.iconMode = 'primary';
     }
 
     public ngOnInit(): void {
         this.iconPositionClass = this.icon_position ? 'sdc-icon-' + this.icon_position : '';
-        this.iconMode = (this.type === "primary") ? 'info' : 'primary';
     }
 
     public onClick = (e): void => {
diff --git a/src/angular/buttons/buttons.module.ts b/src/angular/buttons/buttons.module.ts
index c804758..5c6bdc8 100644
--- a/src/angular/buttons/buttons.module.ts
+++ b/src/angular/buttons/buttons.module.ts
@@ -2,18 +2,20 @@ import { NgModule } from "@angular/core";
 import { ButtonComponent } from "./button.component";
 import { CommonModule } from "@angular/common";
 import { SvgIconModule } from './../svg-icon/svg-icon.module';
+import { ButtonFileOpenerComponent } from './button-file-opener.component';
 
 @NgModule({
     declarations: [
-        ButtonComponent
+        ButtonComponent,
+        ButtonFileOpenerComponent
     ],
     imports: [
         CommonModule,
         SvgIconModule
     ],
     exports: [
-        ButtonComponent
-
+        ButtonComponent,
+        ButtonFileOpenerComponent
     ],
 })
 export class ButtonsModule {
diff --git a/src/angular/buttons/ibutton.interface.ts b/src/angular/buttons/ibutton.interface.ts
new file mode 100644
index 0000000..289935b
--- /dev/null
+++ b/src/angular/buttons/ibutton.interface.ts
@@ -0,0 +1,14 @@
+import { Placement, ButtonType } from "../common/enums";
+
+export interface IButtonComponent {
+    text: string;
+    disabled?: boolean;
+    type?: ButtonType;
+    testId?: string;
+    preventDoubleClick?: boolean;
+    icon_name?: string;
+    icon_position?: string;
+    show_spinner?: boolean;
+    spinner_position?: Placement;
+    size?: string;
+}