how to preview image before upload in ionic 3?

Issue

i am trying to upload and preview image using jquery. But getting this

Error

Property 'result' does not exist on type 'EventTarget'.
reader.onload = function (e) {
 $('#blah').attr('src', e.target.result);
}

page.ts

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}


$('#file').on('change', function () {
  readURL(this);
});

page.html

 <label for="file" class="lbl"><i class="fa fa-plus-circle"></i> &nbsp; Add Attachment</label>
<input type="file" id="file" style="visibility: hidden">
<img src="#" id="blah">

what will be the solution?? i think this code is correct but just the problem is 'result' property. Thanks in advance

Solution

Some time ago, I used the following code to preview an image in Ionic.

In HTML:

<input type="file" value="" (change)="fileChange($event)">
<img *ngIf="img1" [src]="img1"/>

In JavaScript:

fileChange(event) {
  if (event.target.files && event.target.files[0]) {
    let reader = new FileReader();
    reader.onload = (event:any) => {
      this.img1 = event.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);  // to trigger onload
  }
  
  let fileList: FileList = event.target.files;  
  let file: File = fileList[0];
  console.log(file);
}

Improvements are welcome

Answered By - amyogiji