Chat app with Ionic 3 & Firebase – Ep. 3 – Profile pic & Password reset

Hi Friends,

Hope you are all well. This is episode 3 of my chat app with Ionic 3 and firebase series. In this post let’s see how to choose a profile picture for our account from the phone’s file system and also how to code a password reset provision in our app.

Let’s begin.

Since the screencast was too lengthy this time, I decided to cut it into two parts.

Part 1 of the screencast

Part 2 of the screencast

 

The code for this post is available – here.

The complete code for this app is available here. (This is a work in progress and new commits will be added as the app is being built).

Password reset:

Generate a new page using the below command.

Get into login.ts and add the below code.

Now get into passwordreset.scss and add the below code.

As you can see it’s the exact same code that we are using in login.scss and signup.scss to design our page.

Open up passwordreset.html and add the below code.

We just have a single input field and a couple of buttons.

Open up passwordreset.ts and add the below code.

We are simply calling the passwordreset() function in the user provider and sending the email there. But wait, do we have a passwordreset() function in the user.ts file ? Let’s go ahead and add that.

Open up user.ts file and add the below code.

I guess the above function is self-explanatory and there isn’t much to explain here. We are simply making use of the sendPasswordResetEmail() that ships with firebase to send an email with password reset instructions. If the entered email is not registered then it will throw an error back.

Choosing a profile picture:

This is a bit lengthy process. Let me first explain what we are trying to achieve here.

  1. We are going to be choosing a picture from our file system using the cordova-file-chooser plugin.
  2. Then we will be resolving the native path of that file using our cordova-filepath plugin and then storing it as a blob in firebase-storage.
  3. Then we would get the download url of the stored file and then make use of it in our app to show the image.

I have already discussed this entire process in detail in one my previous posts.

I would highly recommend that you read it once by clicking here.

If you remember, we have already created the profilepic page in our last post. We’ll simply be making use of it here.

Open up profilepic.scss and add the below code.

This is just to style the profile picture and center the content.

Now open up profilepic.html and add the below code.

We just have a couple of buttons. One of them is to choose an image. The other is displayed based on a value called moveon. Let’s see how that works.

Open up profilepic.ts file and add the below code.

Whoa, Too much code..?

Most of it is just eye-candy stuff..

It’s actually pretty simple. First let’s go ahead and create a new provider called imghandler which we will be using to manipulate and play around with images in our app.

Open up imghandler.ts and add the below code.

Too much code again..?

First things first.

Let’s go ahead and install the 3 cordova plugins that we have used.

Install the ionic-native wrappers for these plugins as well.

Open up app.module.ts and add the below code.

We are simply importing our plugins. Don’t forget to add them in the providers as well.

Now let’s break down the code in the imghandler.ts file. Rather than describing in detail (as I did in my post on serving images with firebase storage), I will make short concise points on what I have done.

  1. We are making use of the file-chooser plugin to choose a file from the phone’s filesystem.
  2. We are making use of the filepath plugin to resolve the native path of the file.
  3. This is then fed into a reader.
  4. Once the reader finishes reading, a blob is created.
  5. The blob is stored in firebase storage.
  6. Once it is successfully stored, the download url of that file is got using getDownloadURL() method and then sent to the calling statement in the profilepic.ts file.

Now I am using zones to update the imgurl with this url so that it would change the image in real-time thereby providing the user a preview of his account picture. Also the moveon variable is changed to false, which indirectly means that the upload & proceed button will be displayed now.

Let’s go ahead and create a updateimage() function in the user.ts file now.

Open up user.ts and add the below code.

This is pretty much self-explanatory. I am simply updating the users collection with the new image url and also updating the firebase users list.

Whoo.. That’s it guys, Once this is successfully done, we can simply direct the user to the Tabs page.

If everything goes fine you would see the below screen.

Screenshot_2017-06-13-18-11-38 Screenshot_2017-06-13-18-11-53

 

Notice that the first image shows skip this step button, whereas the second image shows the upload & proceed button denoting the stored image in firebase storage.

In our next post we’ll see how to design the profile tab inside our app.

Hope this helped you guys. If you felt that this was helpful, kindly consider supporting me through this link www.patreon.com/rajayogan. It would help me keep providing quality content for free.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • Kuldeep Μaurya

    Hey!!
    Thanks for the wonder tutorial bro!!
    Having Problems when uploading profile pic..
    It’s showing Uncaught(in promise)
    Cordova_not_available
    Help me bro and thanks alot

    • Vincent Gauthier

      that means it only works in mobile devices, not for testing in the browser

  • Konstantin

    Hey, can you make a video for uploading image in iOS, because I see that this Filechooser working only in Android.

    Thanks in advance Raja

  • Miguel Vera

    Hi! this has been a great tutorial. Thank you so much! However, I keep getting this error when trying to access the profile tab. The app uploads ‘correctly’ on the console ‘ionic serve’. I can login and checked in firebase and my user is registered but when clicking on the Profile tab, I get this runtime error: “ERROR Error: Uncaught (in promise): Error: No provider for FileChooser!
    Error: No provider for FileChooser!”. I have have doubled-checked my code with yours in github but just can’t find the problem. Any advice? Thanks in advance!

    • You would need to install the File Chooser plugin and the native wrapper for it bro.. Thanks.. :)

      • Miguel Vera

        Already did, bro. The 3 plugins and the 3 wrappers. :-s

        Posibility…

        A couple days ago, while working on the project. I was prompted to update Ionic to 3.8, this version no longer requires the Cordova cli since it’s already integrated in Ionic’s core. So I did.

        What do you think?

        Many thanks!

        • You fixed this bro..? I updated it now to 3.8 (or the latest version) and I can’t even take a build now.. Have been stuck with this for a couple of hours now.. (Ionic released an update to cli couple of hours back)

          • Miguel Vera

            Noup dude. Been trying different options but haven’t been able to work it out. I’m teying to downgrade to 3.7.0 but the 3.8.0 just won’t go without a fight! Maybe if you try downgrading back to 3.7 and let us how to downgrade if you have

            I’m also considering restarting the project on a diferent directory where I can install 3.7. Will try this evening :-s

            And this morning I was prompted to upgrade to 3.9!!! Can you believe it????

            Let you know if can work it out.

            Cheers!

          • Please don’t upgrade to 3.9.. (3.9.1 was the version released 3 hours back and it’s one I am stuck with)

          • Miguel Vera

            here’s a screen of my errors. I’m just a beginner, so hopefully you have a better idea.

            cheers! https://uploads.disquscdn.com/images/66f56a11c09a4b12ee874d11115d538da158cba58862602fa0b8d2c32d87c596.jpg

          • I fixed this error by adding the vendor.js line. Please add this line in your index.html above the main.js src line.. like this.

          • Miguel Vera

            hi bro!

            JUST SOLVED IT!!!

            I had failed to include the plugins references in the providers list below in the same app.module.ts.

            Since your post only said: “don’t forget to add to the providers as well”, I thought I had to add the imports to the rest of the providers .ts files already created. My bad. Beginner’s error.

            All good now!

            Many thanks for your help!

          • Miguel Vera

            And here’s the error stack

            I have already re-installed the cordova cli, plugins and wrappers. Nothing seems to work :-(

            Runtime Error
            Uncaught (in promise): Error: No provider for FileChooser! Error: No provider for FileChooser! at injectionError (http://localhost:8100/build/vendor.js:1590:86) at noProviderError (http://localhost:8100/build/vendor.js:1628:12) at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/vendor.js:3129:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/vendor.js:3168:25) at ReflectiveInjector_._getByKey (http://localhost:8100/build/vendor.js:3100:25) at ReflectiveInjector_.get (http://localhost:8100/build/vendor.js:2969:21) at AppModuleInjector.get (ng:///AppModule/module.ngfactory.js:237:122) at AppModuleInjector.getInternal (ng:///AppModule/module.ngfactory.js:443:58) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/vendor.js:3936:44) at ProfilePageModuleInjector.NgModuleInjector.get (http://localhost:8100/build/vendor.js:3937:52)

          • Miguel Vera

            Hi buddy.

            I managed to revert to 3.7.0.

            I uninstalled ionic:
            npm uninstall -g ionic

            Ran ionic info to check. No ionic detected

            Then re-installed ionic:
            npm -g ionic @3.7.0

            Then re-installed local ionic cli:
            npm install –save-dev –save-exact ionic@3.7.0

            Then re-installed cordova
            npm install -g cordova

            Ran ionic info:

            @ionic/cli-plugin-cordova: 1.5.0
            @ionic/cli-plugin-ionic-angular: 1.4.1
            @ionic/cli-utils: 1.7.0
            Ionic (Ionic CLI): 3.7.0

            Global packages:
            Cordova CLI: 7.0.1

            Local packages:
            @ionic/app-scripts: 2.1.3
            Cordova platforms: none
            Ionic Framework: ionic-angular 3.6.0

            All reverted to pre-3.8 ionic-cordova integration!

            Hope it helps!
            :-)

            (Can’t get the profile tab to work though :-( )