In this section, we will cover how to upload a file to Firebase storage. In the user profile page, we will add the user profile picture on the top of the page.
The steps involved in uploading and showing the user profile image are as follows:
- Adding HTML properties in a user profile template: We provide an input tag to take a user-selected image from the file chooser. Normally, in the input tag with a file type, we have a button to choose the file; however, in this case, we require the user to click on the default image. We have hidden the button in the input tag using the built in styles, as follows:
<div class="person-icon"> <img [src]="profileImage" style="max-width: 100%; max-height: 100%;"> <input (change)= ...