In my Angular 6 application, I am implementing an image upload feature with the following code:
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
The current implementation allows users to select a file from their computer and display it as text, but I want the selected image to be displayed when clicking on the profile picture instead of the file input button. Additionally, I would like the ability to choose a file from the local folder upon clicking the profile image.
I found a similar functionality in this Codepen example: https://codepen.io/anon/pen/PXjaJv
On hover over the image, the text "Drag your photo here or browse your computer" appears. I aim to replicate this behavior by displaying the same text when hovering over any image to prompt users to change their profile picture.
Please disregard the cropping and dropping features in the provided Codepen link and focus solely on enhancing the UI by adding overlay text on hover and enabling the selection of images from the computer to change the profile picture, with an option to revert to the default avatar image if needed.
I'm seeking guidance on achieving this using pure Angular/TypeScript without relying on jQuery.