Expose a way to check if a profileImage is the default image #1480
Description
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.