How can I display an image using Typescript and Angular 4

Question

I am very new to typescript and web development in general so I am sorry if my code is terrible. Anyways, I am having an issue displaying a "preview image" for a profile picture upload. I am using ng2-file-upload to upload my image to the server and that part is working correctly. Before I click the upload button I want to display the selected image on the page right after it has been selected. Currently I am trying to display the image by retrieving the src property from the HTMLImageElement but the src property appears to be empty.

import { Component, OnInit } from '@angular/core';
import {  FileUploader } from 'ng2-file-upload/ng2-file-upload';

const URL = 'http://localhost:4200/api/upload';

@Component({
  selector: 'app-view-profile',
  templateUrl: './view-profile.component.html',
  styleUrls: ['./view-profile.component.css']
})
export class ViewProfileComponent implements OnInit {

  constructor() { }
  public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'newProfilePicture'});
  title: string;
  previewImage: any;
  tempImage: any;
  source: string;

  imagePreview(input) 
  {
      document.getElementById("previewImage").style.display="block";
      
        console.log("Image is selected")
        this.previewImage = document.getElementById("previewImage");
        console.log(this.previewImage);
        
        this.source = (<HTMLImageElement>document.getElementById('previewImage')).src
        console.log("Image Source: " + this.source + " Should be inbetween here");
        
      
      //var reader = new FileReader();
        
        //console.log(this.previewImage);
      
  }

  ngOnInit() {
   this.title = 'View or Update Your Profile';
   this.uploader.onAfterAddingFile = (file)=> {file.withCredentials = false;};
   this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
        console.log("ImageUpload:uploaded:", item, status, response);
    //this.imagePreview();


    };
  }


}

And here is my HTML

<div class="container">
    <h1>{{title}}</h1>

    <div>

        <input type="file" id="previewImage" (change)="imagePreview(this);" name="newProfilePicture" ng2FileSelect [uploader] ="uploader" />
        <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
          Upload Your File
        </button>
    </div>
</div>

it's duplicate. https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Rach Chen, Nov 02 '17 at 03:57
Not really. He did ask how to do it in Typescript and Angular4 specifically. — Alec Gerona, Mar 07 '18 at 06:02

Vivek Doshi · Answer 1 · 2018-03-07T06:14:28.777

37

You achive this by this simple function :

Template :

<img [src]="url" height="200"> <br/>
<input type='file' (change)="onSelectFile($event)">

Component :

onSelectFile(event) { // called each time file input changes
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
}

Here is the working example of it, please check this out:

WORKING DEMO

edited Mar 07 '18 at 06:14

answered Nov 02 '17 at 03:55

Vivek Doshi

56,649
12
110
122

1

@Kenny Ho, will you please accpet and upvote the answer? – Vivek Doshi Nov 07 '17 at 05:59
2

@VivekDoshi I got `error TS2339: Property 'result' does not exist on ty pe 'EventTarget'.` which is this line inside of onSelectFile(event) `this.url = event.target.result;` If I change it to anything, ng cli will auto-recompile successfully. Repeat will create get the error back. Any thought? – Jeb50 Jul 28 '18 at 17:51
Jeb50 Add `` cast to `event.target.files` and `event.target.files[0]` – Mr. Wizard Aug 09 '18 at 11:03
1

I have used this code but for me it is working but with two problems at reader.onload = (event) [tslint] Shadowed name: 'event' (no-shadowed-variable and to the this.person.photo = event.target.result // Property 'result' does not exist on type 'EventTarget' – TheCoderGuy Aug 29 '18 at 07:47
Regarding the TS error, instead of using event.target.result, you can just use reader.result – Kaixin Apr 26 '20 at 09:14
You sample is working well. However, I have some question on how to implement such opening mechaning when the area to display uploaded image was in different set from the button set: display section is in sketch.component.html / sketch.component.ts / sketch.component.spec / sketch.component.scss set while the buttons set is in topnav.component.html / topnav.component.ts / topnav.component.spec / topnav.component.scss set while the input [] must be hidden. If you can come up with example like this one, I will be appreciate. – Wisarut Bholsithi Feb 22 '22 at 15:11

score 8 · Answer 2 · edited Jul 04 '18 at 14:46

8

Template :

<input type='file' (change)="readUrl($event)">
<img [src]="url">

Component :

 readUrl(event:any) {
      if (event.target.files && event.target.files[0]) {
          var reader = new FileReader();

          reader.onload = (event:any) => {
              this.url = event.target.result;
          }

          reader.readAsDataURL(event.target.files[0]);
      }
 }

T tried it, and it works without any error.

edited Jul 04 '18 at 14:46

juzraai

5,693
8
33
47

answered Jul 01 '18 at 13:47

Iron shield

329
4
9

I have used this code but it is showing me one error reader.onload = (event:any) // event Shadowed name: 'event' (no-shadowed-variable) – TheCoderGuy Aug 30 '18 at 08:40

How can I display an image using Typescript and Angular 4

2 Answers2

Linked

Related