how to preview image before upload in ionic 3? - ionic-framework

Question

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> 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

Answer 1

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

Answer 2

for ionic 4
In html
<img class="logo" src="{{img_new}}" *ngIf="img_new!=''"/>
<input type="file" name="image" accept="image/*" (change)="changeListener($event)">
In ts
changeListener($event): void {
this.file = $event.target.files[0];
console.log(this.file);
let reader = new FileReader();
reader.onload = ($event:any) => {
this.img_new = $event.target.result;
}
reader.readAsDataURL($event.target.files[0]);
}