Add user profile picture

.gustavocardosolast year

6

• 

  jarrod_not_jared

  last year

  You can create a custom avatar component that will allow you to do this. Check out the

  avatar

  property here:

  https://payloadcms.com/docs/admin/overview#admin-options
  
  

  Combine that with the

  useAuth

  hook to get the user and you should have all that you need 👍

  
  
  https://payloadcms.com/docs/admin/hooks#useauth
• 

  .gustavocardosolast year

  Thank you for your answer. i'll take a look at those links you sent me!

• 

  txjxsx12 months ago

  hi

  @333046697062039553

  , know this is late but did you get around with uploading user profile pictures, i didn't get the answer above.

• 

  roadbl0ck_010 months ago

  Can you please share the custom component code?

• 

  colbygilbert95987 months ago

  I also do not understand this suggestion by

  @281120856527077378

  When I click the blank user icon in the top right corner I am redirected to my user profile. Shouldnt I be able to specify a feild that is the image for my profile? Like using an upload on the media collection

  
  
  

  Here is a react component I figured out that works, pulls image from an upload feild named avatar:

  
  

  import React from 'react'
  import { useAuth } from 'payload/components/utilities'
  import { Media, User } from '../../payload-types'
  
  const ProfilePicture: React.FC = () => {
      const { user } = useAuth<User>()
      return (
          <img
              style={{
                  width: '25px',
                  height: '25px',
                  borderRadius: '50%',
                  objectFit: 'cover',
              }}
              src={
                  (user.avatar as Media).url ||
                  'https://www.gravatar.com/avatar/218644472ede33e83ae2002c4f4336d3?default=mp&r=g&s=50'
              }
              alt="yas"
              width={25}
              height={25}
          />
      )
  }
  
  export default ProfilePicture

• 

  outrageous_dove_40743last month

  I'm missing something here to get this to work.

  
  

  I'm using the

  admin: avatar: ProfilePicture

  for a custom component.

  
  
  

  Admin panel loads but nothing loads in the markup where you'd expect.

  
  

  It's unclear to me if it needs to be imported elsewhere so Payload knows about this custom component.

  
  
  

  One difference to note is that it's requesting I declare 'use server' at the top of the profile picture component.