The Techies' pub

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.

* See http://ionicframework.com/docs/components/#navigation for more info

* on Ionic pages and navigation.

*/

@IonicPage()

@Component({

selector:'page-passwordreset',

templateUrl:'passwordreset.html',

})

exportclassPasswordresetPage{

email:string;

constructor(publicnavCtrl:NavController,publicnavParams:NavParams,

publicuserservice:UserProvider,publicalertCtrl:AlertController){

}

ionViewDidLoad(){

// console.log('ionViewDidLoad PasswordresetPage');

}

reset(){

let alert=this.alertCtrl.create({

buttons:['Ok']

});

this.userservice.passwordreset(this.email).then((res:any)=>{

if(res.success){

alert.setTitle('Email Sent');

alert.setSubTitle('Please follow the instructions in the email to reset your password');

}

else{

alert.setTitle('Failed');

}

})

}

goback(){

this.navCtrl.setRoot('LoginPage');

}

}

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.

1

2

3

4

5

6

7

8

9

10

passwordreset(email){

varpromise=newPromise((resolve,reject)=>{

firebase.auth().sendPasswordResetEmail(email).then(()=>{

resolve({success:true});

}).catch((err)=>{

reject(err);

})

})

returnpromise;

}

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.

We are going to be choosing a picture from our file system using the cordova-file-chooser plugin.

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.

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.

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.

We are making use of the file-chooser plugin to choose a file from the phone’s filesystem.

We are making use of the filepath plugin to resolve the native path of the file.

This is then fed into a reader.

Once the reader finishes reading, a blob is created.

The blob is stored in firebase storage.

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.

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 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????

i follow all your tutrial episode, but i got a problem when i test on mobile phone, and i try to change profile pic, at signup also in profile tabs page, but teh pic always change to the default place holder image, can you help me ?
something wrong with my rules at firebase or what ?
this my rules code at storage firebase

Hi Raja,
great guide, thanks!
I have followed the guide exactly, yet whenever I go to upload an image I get stuck with an infinite please wait loader. The image is not being uploaded to Firebase storage, it just gets stuck there. Any suggestions on how to proceed from here would be greatly appreciated!

Jakob Hübschmann Pettit

I must add that it works as long as I set the firebase storage rules to public, but this poses a security issu imho.