External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: allow avatar upload regardless of mode

Browse Source 
Remove avatarMode prop from AvatarWithUpload and always render the upload
overlay. The upload functionality is now unconditionally available.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Théo LAGACHE
2026-06-25 11:02:10 +02:00
co-authored by Claude Sonnet 4.6
parent 8d448718d0
commit 3f76f7b604
1 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/profile/components/avatar-with-upload.tsx
+15 -20
View File
@@ -8,17 +8,14 @@ import { updateImageUserAction } from "@/features/profile/actions/avatar.action"
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { User } from "@/db/schema/02_user"; import { User } from "@/db/schema/02_user";
import React, { ChangeEvent } from "react"; import React, { ChangeEvent } from "react";
import type { AvatarMode } from "@/features/onboarding/types";
export type AvatarWithUploadProps = { export type AvatarWithUploadProps = {
user: User; user: User;
avatarMode?: AvatarMode;
avatarUrl?: string; avatarUrl?: string;
}; };
export const AvatarWithUpload = (props: AvatarWithUploadProps) => { export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
const user = props.user; const user = props.user;
const canUpload = !props.avatarMode || props.avatarMode === "internal";
const src = props.avatarUrl ?? user.image ?? undefined; const src = props.avatarUrl ?? user.image ?? undefined;
const router = useRouter(); const router = useRouter();
@@ -79,23 +76,21 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
{canUpload && ( <div
<div onClick={() => {
onClick={() => { const fileInput = document.createElement("input");
const fileInput = document.createElement("input"); fileInput.type = "file";
fileInput.type = "file"; fileInput.accept = ".jpg,.jpeg,.png,.webp";
fileInput.accept = ".jpg,.jpeg,.png,.webp"; fileInput.onchange = (e: Event) =>
fileInput.onchange = (e: Event) => handleImageUpload(
handleImageUpload( e as unknown as React.ChangeEvent<HTMLInputElement>,
e as unknown as React.ChangeEvent<HTMLInputElement>, );
); fileInput.click();
fileInput.click(); }}
}} className="cursor-pointer absolute inset-0 flex justify-center items-center opacity-0 transition-opacity hover:opacity-30 hover:bg-gray-500 hover:bg-opacity-50 rounded-full w-24 h-24 lg:w-32 lg:h-32"
className="cursor-pointer absolute inset-0 flex justify-center items-center opacity-0 transition-opacity hover:opacity-30 hover:bg-gray-500 hover:bg-opacity-50 rounded-full w-24 h-24 lg:w-32 lg:h-32" >
> <UploadIcon className="w-12 h-12 lg:w-16 lg:h-16 text-primary" />
<UploadIcon className="w-12 h-12 lg:w-16 lg:h-16 text-primary" /> </div>
</div>
)}
</div> </div>
); );
}; };