Feature to upload user image

[infiniteoverflow]

Wont it be nice if the user can upload their pic in their profile ?

We need an option in the InfoScreen to upload an image, and when submitted, the image should be stored in Firebase Storage and its public URL appended to the user details in Firebase RealtimeDB.

If the user is signing-in using Social Auth, get the image link from the Account as use it as the profile pic.

[adityathakurxd]

Can I take this up?

[infiniteoverflow]

yess @adityathakurxd you can !

[adityathakurxd]

I'll unassign this @infiniteoverflow 😬 This could be a good issue for someone else to take up.

[Aditya-AJ-19]

@infiniteoverflow I want to take this issue but I won't find any thing regarding firebase realtime database in your project that how you store your users info in firebase data base ,so can you explain me what I have to do

[adityathakurxd]

The link to the Google Services Files for Firebase is available in the README: https://drive.google.com/drive/folders/161WwprL9P_mHqdln_S0Zfm2bVnQSI1Dc?usp=sharing

You might not get access to the console.

Right now the project, if you look into the Profile section, uses the first letter of the first name as Avatar for the profile. This comes from the User object by Firebase auth.

CircleAvatar(
                radius: 30,
                child: Text(
                  user.displayName.substring(0, 2).toUpperCase(),
                  style: TextStyle(
                    color: Styles.profileBar,
                  ),
                ),
                backgroundColor: Colors.white,
                //backgroundImage: AssetImage('assets/images/Reading.png'),
              ),

What I believe the steps of action here would be:

• Add an Edit button on the profile avatar
• User can click on the edit button to pick a file (an image) from device
• This picked image can then be uploaded to Firebase storage and a link of it saved in a collection with uid of the user
• If the uid of the user is available in collection, the profile avatar should display the image otherwise show the first letter of the name.

[adityathakurxd]

Make sure you also check the conversation on this PR: https://github.com/infiniteoverflow/Libro/pull/146

[Aditya-AJ-19]

yes I get what are you trying to say. but the thing is ,in this project where's the code that's stores the user info to firebase realtime database . because I want to refer the structure of user collection so that I can make changes to update userProfileUrl. and also in firebase storage where to store image is there any perticular location?

[adityathakurxd]

As I mentioned, it uses the Firebase User object.

If you look at the Home Screen, you'll find:

  getuser() async { 
     User firebaseUser = _auth.currentUser; 
     await firebaseUser?.reload(); 
     firebaseUser = _auth.currentUser; 
     if (firebaseUser != null) { 
       await setState(() { 
         this.user = firebaseUser; 
         _isLoggedin = true; 
       }); 
     } 
   }

FirebaseAuth.instance.currentUser provides the current user logged into the app and some details such as name, image url, etc.

For both Realtime Database and Storage, you can using code create the required collection or bucket and save data to them.

This is again my approach. Please wait on the repository moderators to provide details.

[alam-shoaib]

is this issue still open ? i want to work on it