import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class InputImageComponent { 

  private file: FileImage;
  public srcImage: string;
  public name: string;
  public hasImage: boolean = false;
  constructor() { }

  ngOnInit() {

  }
  onChange(event:any) {
    console.log(event);
    var tgt = event.target || window.event.srcElement,
    files = tgt.files;
    let image = new Image();
    image.src= event.srcElement.value;
    
    // FileReader support
    if (FileReader) {
      var fr = new FileReader();
      let that = this;
      fr.onload = function () {
          that.srcImage = fr.result;
          that.hasImage = true;
      }
      fr.readAsDataURL(files[0]);
    }
    this.name = "Logo"; 
    this.file = new FileImage("logo", event.srcElement.value, image, "1:3")
    
  }

}

class FileImage {
  private name: string;
  private url: string;
  private image: HTMLImageElement;
  private ratio: string;

  constructor(_name: string, _url: string, _image: HTMLImageElement, _ratio:string) {
    this.name = _name;
    this.url = _url;
    this.image = _image;
    this.ratio = _ratio;  
  }

}