O'Reilly logo

Hands-on Full Stack Development with Angular 5 and Firebase by Uttam Agarwal

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Uploading the profile picture

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:

  1. Adding HTML properties in a user profile templateWe 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)= ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required