Angular 2: get image from file upload

Question

Hi in my Angular 2 app I am using ng2-file-upload:

<input type="file" ng2FileSelect [uploader]="uploader" multiple (change)="onChange($event)">

I would like to create an instance of image object in my javascript code from uploader or the event object. Somehow like:

public onChange(event) {
   let item = this.uploader.queue[0];
   let img = new Image();

   img.src = item.SOMETHING;
       OR
   img.src = event.SOMETHING;

}

I am not sure how to do that.

Answer 1

You can do that without any third-party library.

helloworld.component

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  templateUrl: 'src/hello_world.html',
  styles: [`
    .preview img{
      max-height: 50px;
    }
  `]
})
export class HelloWorld {

  // Declaring the variable for binding with initial value
  yourName: string = '';

  fileChange(event) {
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
      let file: File = fileList[0];
      var img = document.querySelector("#preview img");
      img.file = file;

      var reader = new FileReader();
      reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
      reader.readAsDataURL(file);
    }
  }
}

src/hello_world.html

<div id="preview" class="preview">
  <img src="">
</div>
<form>
  <input type="file" (change)="fileChange($event)" placeholder="Upload file">
</form>

Working plunker