How to change profile picture in angular?

Question

I am making angular 6 application where i am using image upload option which has,

Html:

<img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/>
<input type='file' (change)="onSelectFile($event)">

Ts:

  onSelectFile(event) {
    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;
      }
    }
  }

Working stackblitz: https://stackblitz.com/edit/angular-file-upload-preview-ekyhgh

Here the thing i have made is given html input file which displays choosen file as text but i need to have it on click over the profile image, the folder needs to be displayed from local (which will appear on click choosen file button in normal)..

In order to confuse much i am having a link which i am in the need was https://codepen.io/anon/pen/PXjaJv

Here you can see on hover over the image the text appears as Drag your photo here or browse your computer.. (The same text appears in the given link default because there is no picture there but i am in the need of hover only because i am having avatar image already so on hover over any image i need to display this text of changing profile picture)..

Ignore cropping and dropping of the image in this link https://codepen.io/anon/pen/PXjaJv but only thing i am need is UI changes like on hover make an overlay text and on click the text make browse of pictures from computer to change and then change the profile picture with delete option which will return back to avatar image itself (if deleted)..

Kindly help me to achive the result using pure angular/typescript way without jquery.

Solution

You should use label tag with proper for attribute. for attribute must contain id of input tag.

Look at example.

<label class="hoverable" for="fileInput">
  <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> 
  <div class="hover-text">Choose file</div>
  <div class="background"></div>
</label>
<br/>
<input id="fileInput" type='file' (change)="onSelectFile($event)">
<button *ngIf="url" (click)="delete()" >delete</button>

Example on stackblitz.

Comments

[Maniraj Murugan]

Thanks for your solution but i should not have <input id="fileInput" type='file' (change)="onSelectFile($event)"> separately showing the Choose File text.. Only upon click over the hover text should browse.. I am in the need of same UI LIKE codepen.io/anon/pen/PXjaJv where nowhere you find text and awkward button named choose file..

[Stepan Kasyanenko]

@undefined You can hide input tag by css. I've updated stackblitz.

[Stepan Kasyanenko]

@undefined where is delete button in your example in html? I've added simple delete button. Check please.

[Stepan Kasyanenko]

@undefined It's another question. You didn't mention about styling of text.