3 files changed, 36 insertions, 6 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html
index 635b83cbd..f97ea0ee7 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html
@@ -18,4 +18,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 -->
-<input type="file" accept=".cba">
-\ No newline at end of file
+<div>
+    <input type="file" accept=".json" (change)="fileChanged($event)">
+</div>
+<div>
+    <button mat-button matStepperNext class="matStepNextBtn" (click)="extractBlueprint()">Upload</button>
+</div>
+\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss
index 22941b5fa..5732b5a26 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss
@@ -17,4 +17,12 @@ 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============================================
-*/
-\ No newline at end of file
+*/
+
+.matStepNextBtn {
+    color: white;
+    background: gray;
+    margin-top: 10px;
+    position: absolute;
+    margin-bottom: 5px;
+}
+\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
index a58be6eb3..3a344c9fc 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
@@ -19,7 +19,9 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { IBlueprint} from '../../../../common/core/store/models/blueprint.model';
 
 @Component({
   selector: 'app-search-template',
@@ -27,10 +29,25 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./search-template.component.scss']
 })
 export class SearchTemplateComponent implements OnInit {
-
+  file: any;
+  localBluePrintData: IBlueprint;
+  fileText: object[];
+  
   constructor() { }
 
-  ngOnInit() {
+  ngOnInit() { }
+
+  fileChanged(e: any) {
+    this.file = e.target.files[0];
+    let fileReader = new FileReader();
+    fileReader.readAsText(e.srcElement.files[0]);
+    var me = this;
+    fileReader.onload = function () {
+      let fileData = JSON.stringify(fileReader.result);
+      me.localBluePrintData = JSON.parse(fileData);
+      console.log(me.localBluePrintData);
+    }
+  }
+  extractBlueprint(){
   }
-
 }