Expose a way to check if a profileImage is the default image

[b0o]

Package

• @clerk/clerk-js
• @clerk/clerk-react

Description

We're working on replicating the add/remove profile image component in our application. We've found that you can set the image to null to remove the current image, but if the current image is the default image, the Clerk API responds with a 404 error. Here's a very simple example:

function ProfileImageUploader() {
    const { user, isLoaded } = useUser()
    if (!isLoaded) return <Loading />
    const onRemoveImage = () => user.setProfileImage({ file: null }).then(() => user.reload())
    const onSetImage = (imageData) => user.setProfileImage({ file: imageData }).then(() => user.reload())
    return (
        <div>
            <button onClick={onRemoveImage}>Remove Profile Image</button>
            <ImagePicker onPick={onSetImage}>Set Profile Image</ImagePicker>
        </div>
    )
}

Clicking the Remove Profile Image button will work if the user has an image set, but it will cause an error if the user has the default profile image.

The user object has no obvious way of determining whether the profile image is the default or not, but I did find a utility function to do it in this repo: https://github.com/clerkinc/javascript/blob/ae9fc247aca5bf8211cc8e021706325a010ce9d3/packages/clerk-js/src/utils/image.ts#L14-L29

This function isn't exported for external use, but your internal UI components do use it for this functionality: https://github.com/clerkinc/javascript/blob/ae9fc247aca5bf8211cc8e021706325a010ce9d3/packages/clerk-js/src/ui/components/UserProfile/ProfilePage.tsx#L99-L103

For now, I've just copied the implementation of isDefaultImage into our codebase. It would be nice if this was improved, though, either by adding a property to the user object like hasDefaultProfileImage: boolean, or by exposing the isDefaultImage utility.

[anagstef]

Hello @b0o! Thank you for reaching out!

This is actually a valid request! We are looking into it, and we will let you know! :)

[clerk-cookie]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[statico]

I found this. Is it supported or correct?

https://github.com/clerkinc/javascript/blob/435d2cff5dfc86c58690d3f0d843f567ac4f3c04/packages/clerk-js/src/utils/image.ts#L14-L29

[dimkl]

Hello @statico,
a hasImage property will be supported on User and Organization related resources in our next release @clerk/[email protected]

[LekoArts]

Hello!

We're tracking our feature requests now in feedback.clerk.com. If your suggestion is already in the list of proposed changes, please upvote. Otherwise, please create an entry. Thanks!

Our feedback platform will be the source of truth for feature requests going forward and your input and votes will help us shape the roadmap.

Thanks for using Clerk! 💙