Angular Sign Up with Firebase (BONUS): Uploading a profile photo with Firebase Storage

[@ZoaibKhan]

Hey guys! For those of you getting a typescript mismatch error, it is due to Angular 14 and the upgrade to Typed Forms. So check out my new video on exactly how to upgrade to the new Typed Forms. I've also updated the code on github. Cheers :) kzbin.info/www/bejne/lZDKZH2FbMqHpKs

[@djp-showsa1608]

how do I run the code but using my own database acoount?

[@phanamalinetano3034]

Hey man!! You are the best!!! Thanks too much for all!!! I'm learning more and more with you! I love your videos. Never stop please!!! LIKE LIKE LIKE!!!!!!!!!!!!

[@ZoaibKhan]

Thanks Caminhaoe! Glad that you liked them. More are coming :)

[@wathanaphon1]

I got a ploblem error was error TS2345: Argument of type 'User' is not assignable to parameter of type 'ProfileUser'. Types of property 'email' are incompatible. Type 'string | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'. ---------------------- I use Angular v.15 material v.15.2.6, fire v.7.5.0

[@NinjaTylerBlevins]

Hello again, for some reason I think the user observable is null, making the image upload not work, would you be able to help me with this?

[@ZoaibKhan]

Difficult for me to say without looking at your code. There could be multiple reasons for this. If you can please share on [e-mail]

[@shoaiblodha5857]

The uploadImage function you made in this tutorial is not working in angular 17 (which I am using). it does not even state any error it just becomes blank when we go to the /profile route.. but when I remove that function the route is working properly. Ifm you have a solution please reply, and I would sugggest you for a newer version of this tutorial. thanks.

[@ZoaibKhan]

Have you tried updating the angular fire version to 17 as well because otherwise it'll be incompatible with Angular 17?

[@shoaiblodha5857]

@@ZoaibKhan I figured out the issue, it was.. In the ang 17 there is no app.module.ts, so the important stuff of that file is in the app.config.ts, I just had to add the firestore there. It solved the issue for me. Thanks

[@TheRealHoernchen]

I love your Videos I just Started Programming 3 Months ago and I would say I'm already okay with my skills but sometimes your cutes just come out of nowhere making it a bit harder to get it but go Ahead really good and helpful videos

[@ZoaibKhan]

Thanks Metyxs for your honest feedback! If you don't mind sharing, could you give me an example of the cuts which are bothering you so I can improve upon it. I usually make cuts just to improve the flow and make it less boring for coders. Thanks again

[@TheRealHoernchen]

@@ZoaibKhan not Really much to improve just the flow is maybe only for me to fast some times its hard to understand what you just did but maybe its because i am pretty new to Programming so just a view from a Noob i guess xD

[@rojaachan]

An updated video of this same tutorial would be very helpful, everything is outdated and I'm having a lot of trouble... :(

[@ZoaibKhan]

This is quite recent with Angular 13. For upgrading the app to Angular 14, check out my last video on Typed Forms where I show how to update the app to handle the errors related to Typed Forms. If you've any other errors, please share here.

[@rojaachan]

@@ZoaibKhan I feel like I am very close. When I upload a file it successfully stores into my storage on Firebase but my user credentials don’t seem to be updating as photoURL is still null. I also get an error in my console that says “cannot read properties of undefined (reading ‘indexOf’)” I have been trying for hours and I feel I just made my project worse. If you can help me I would appreciate it gladly.

[@adiscivgin]

HI Khan, really nice tutorial and I have one problem when I want to upload image to firestore storage. Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=failed-precondition]: The Cloud Firestore API is not available for Firestore in Datastore Mode database projects/angular-sign-up-6b1c3/databases/(default). This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

[@ZoaibKhan]

Thanks. Is everything else is working fine?

[@adiscivgin]

@@ZoaibKhan I am currently thinking what should be done in order to fix my isssue from previuos comment. So far I've enabled Google Cloud Firestore API but still see the same issue, apart from this everything works fine.

[@Shubham18nov]

The only problem is when i click to update a profile picture but instead of selecting a picture I just close the window and do not select any picture the existing profile pic gets corrupted.

[@ZoaibKhan]

Yeah, I didn't have time to add validation checks in this tutorial. So what you need to do is to check for a valid file in the event handler. If not, then simply return the function without doing anything. That should take care of this failure case.

[@davidbelchev5438]

Hi, I am currently following your tutorial and when i add *ngIf="user$ | async as user" as you did on 3:30, when I try to go to that page it doesn't load and it's just blank.What am I doing wrong?

[@davidbelchev5438]

I fixed the error xddd. It was very strange because i didn't have access to angular material at all in that particular component, so i deleted it and i created a new one .

[@ZoaibKhan]

That usually happens when the component is not declared in the module where the material modules are imported. Currently Angular requires components to be part of modules. In future, there will be standalone components as well, which'll work without modules.

[@mohitmahajan1947]

@@ZoaibKhan in my case, it is declared & even tried deleting and recreating still not working.

[@RajKumar-ek8ws]

Sir I have upload image but image was not upload error message view

[@ZoaibKhan]

Hey Raj! Can you give me the exact error in developer console?

[@yelose85]

add type="button" to the image click button, this solved the problem for me.

[@vndaba]

Very high quality content..... nice!!

[@ZoaibKhan]

Glad you liked it, mwangi!

[@jannis5503]

Hey Man! Thanks for the great tutorial. Its awesome work. I just have a question, i followed along your tutorial and implemented everything you have shown. Everything works except of the profile picture upload. Everytime i try uploading an image it tells me the error message... ive searched the code for about 2-3 hours and compared everything with you code to see if i can spot a mistake. but i simply dont... i know its hard to tell the mistake from far away but do you have any ideas?

[@ZoaibKhan]

Hey Jannis! Thanks for reaching out. What error are you getting in the console?

[@jannis5503]

@@ZoaibKhan Hey Zoaib! I fixed the issue. Your code was perfect, it had to do with the Storage rules, i had no permission to write/read. Changed that according to docs and now it works like a charm

[@t-softtechnologies9322]

Thanks so much Bro... your video has really inspired me on my current project ... Thanks so much for your time and knowledge shared. I followed this tutorial step by step but am stuck at the last step pls... Am getting error with this line in the html .... The user is underlined with error (Argument type User is not assignable to parameter type Observable )... Please what am i doing wrong?

[@ZoaibKhan]

Could you show me your code a bit more? Seems like a type mismatch in the user object. Try to check if they're exactly the same

[@t-softtechnologies9322]

@@ZoaibKhan Thanks Bro... I later figured it out ... I was using ' ' (single quote) instead of this ` ` for the path... Thanks so much... you're a Hero... Looking forward to more of your Tutorials on Angular

[@0300jansom]

photourl not detecting?

[@ZoaibKhan]

Is it not being set correctly in firebase as well?

[@SuperShivammm]

Love it dear too good explain. Thanks

[@khanfarman1]

Hello, where can i find the documents for this? Please reply i am stuck

[@ZoaibKhan]

Hey Farman! You can refer to the Angular fire docs and the Firebase modular SDK docs for reference.

[@khanfarman1]

@@ZoaibKhan thanks for replying, i will really appreciate if you could just share the doc link here

[@gsr5706]

can u make a cropper and image preview? would be interesting

[@ZoaibKhan]

Oh yes, I've thought about it, even while making this photo upload with firebase app :) Currently, working on a chat app with firebase, but hopefully after that a video on this!

[@gsr5706]

​@@ZoaibKhan Appreciate, much more recognizment for you men, you do a great job =)

[@RicardoBelfort]

Very nice tutorial. Thanks.

[@ZoaibKhan]

You're welcome, Ricardo! Glad you liked it ☺️

[@BeastFish22]

Thank you. It helped me a lot

[@ZoaibKhan]

You're welcome, Askkattor! I hope you find my other videos useful as well :)

[@johnohnitv.martinez2990]

mat-icon not working for me

[@ZoaibKhan]

Did you include MatIconModule in app module?

[@adamhaouzi6180]

You have to import them on file style.scss

[@yelose85]

You have to import it from angular material API tab

[@kalseven]

Tutorial is outdated, this no longer works now

[@ZoaibKhan]

Which part is not working for you, Stefano?

[@ThePanadol4]

thank u so much

[@ZoaibKhan]

You're welcome!