Add upLoadImg service

src/app/app.component.css

@@ -0,0 +1,3 @@
+w150 {
+  width: 150px;
+}

src/app/pages/pages.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 
@@ -51,7 +52,8 @@ import { ProfileComponent } from './profile/profile.component';
         FormsModule,
         PagesRoutingModule,
         ChartsModule,
-        PipesModule
+        PipesModule,
+        CommonModule
     ],
     exports: [
         PagesComponent,

src/app/pages/profile/profile.component.html

@@ -35,17 +35,17 @@ <h6 class="card-subtitle">{{user.name}}</h6>
 
   <div class="col-lg-5">
     <div class="card">
-      <div class="card-body">
+      <div class="card-body card text-center">
         <h4 class="card-title">User Profile</h4>
         <h6 class="card-subtitle">User Name</h6>
 
-        <img src="" alt="">
+        <img [src]="imgTemporary" class="w150" alt="">
 
-        <input class="btn" type="file" name="" id="">
+        <input class="btn" type="file" (change)="selectImg($event)">
 
         <br>
 
-        <button type="submit" class="btn btn-block btn-success waves-effect waves-light m-r-10">
+        <button type="submit" [disabled]="img == null" class="btn btn-block btn-success waves-effect waves-light m-r-10" (click)="upLoad()">
           <i class="fa fa-update"> </i> Save
         </button>
 

src/app/pages/profile/profile.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
+import * as swal from 'sweetalert';
+
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
@@ -9,7 +11,11 @@ export class ProfileComponent implements OnInit {
 
   user: User; // Obtengo User del Modelo
 
-  constructor() { }
+  img: File = null;
+  imgTemporary: any;
+
+  constructor() {
+  }
 
   ngOnInit() {
     this.user = {
@@ -25,11 +31,47 @@ export class ProfileComponent implements OnInit {
     this.user.email = value.email;
   }
 
+  selectImg(event) {
+
+    console.log(event);
+
+    if (!event.target.files[0]) {
+      this.img = null;
+      return;
+    }
+
+    if (event.target.files[0].type.indexOf('image') < 0) {
+      this.img = null;
+      swal(`Only Image`, `It is not a image`, `error`);
+      return;
+    }
+
+    this.imgTemp();
+
+    this.img = event.target.files[0];
+    console.log(this.img);
+  }
+
+  upLoad() {
+    console.log(`OK`);
+  }
+
+  imgTemp() {
+    let reader = new FileReader();
+    let urlImgTemp = reader.readAsDataURL(event.target.files[0]);
+
+    reader.onloadend = () => {
+      console.log(reader.result);
+      this.imgTemporary = reader.result;
+    }
+  }
+
 }
 
 
 
 interface User {
   name: string;
   email: string;
+  img: string;
 }

src/app/services/service.index.ts

@@ -1,3 +1,4 @@
+export { UpLoadFileService } from './up-load-file/up-load-file.service';
 export { SettingsService } from './settings/settings.service';
 export { SharedService } from './shared/shared.service';
 export { SidebarService } from './shared/sidebar.service';

src/app/services/service.module.ts

@@ -1,19 +1,18 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 // Services
-import { SettingsService, SharedService, SidebarService } from './service.index';
+import { SettingsService, SharedService, SidebarService, UpLoadFileService } from './service.index';
 
 
 @NgModule({
   imports: [
-    CommonModule
   ],
   declarations: [],
   providers: [
     SettingsService,
     SharedService,
-    SidebarService
+    SidebarService,
+    UpLoadFileService
   ]
 })
 export class ServiceModule { }

src/app/services/up-load-file/up-load-file.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { resolve } from 'q';
+
+@Injectable()
+export class UpLoadFileService {
+
+  // The code is in JS plain becuase Angular don't support work with Files
+
+  constructor() { }
+
+  upLoad(file: File, type: string, id: string) {
+
+    let promise = new Promise((res, rej) => {
+
+      // I send by AJAX
+      let fromData = new FormData();
+      let xhr = new XMLHttpRequest();
+
+      // File Data
+      fromData.append('keyBody', file, file.name);
+      // Peticion AJAX
+      xhr.onreadystatechange = () => {
+
+        // I used only this state when the peticion is UP, but I can used other states(EX: loading)
+        if (xhr.readyState === 4) {
+          if (xhr.status === 200) {
+            console.log('File UpLoad');
+            resolve(xhr.response);
+          } else {
+            console.log('File UpLoad Fail !!!!');
+            rej(xhr.response);
+          }
+        }
+      };
+
+      let urlBase = `http://address.com`;  // Address Example
+      let urlService = urlBase + `/upload/` + type + `/` + id; // Example
+
+      xhr.open(`PUT`, urlService, true);
+      xhr.send(fromData);
+    });
+
+
+
+
+
+  }
+
+}