如何更改角度的个人资料图片？

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.

Answer 1

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 .

Answer 2

Although Above answers are correct I would like to add,

.css

p {
  font-family: Lato;
}

.image-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

img {
  height: 200px;
  width: 200px;
  border: 5px solid #000;
  border-radius: 50%;
}

.select-profile-picture {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.message {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  transition: all 1s;
  opacity: 0;
}

.image-container:hover .message {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.html

<div class="image-container">
 <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'" class=""> <br/>
 <input type='file' (change)="onSelectFile($event)" class="select-profile-picture">
 <span class="message">Tap here to select your picture</span>
</div>