patching user displayName and profileImageUrl

src/main/events/index.ts

@@ -24,6 +24,7 @@ import "./library/remove-game";
 import "./library/remove-game-from-library";
 import "./misc/open-external";
 import "./misc/show-open-dialog";
+import "./misc/image-path-to-base-64";
 import "./torrenting/cancel-game-download";
 import "./torrenting/pause-game-download";
 import "./torrenting/resume-game-download";

src/main/events/misc/image-path-to-base-64.ts

@@ -0,0 +1,14 @@
+import mime from "mime";
+import { registerEvent } from "../register-event";
+import fs from "node:fs";
+
+const imagePathToBase64 = async (
+  _event: Electron.IpcMainInvokeEvent,
+  filePath: string
+) => {
+  const buffer = fs.readFileSync(filePath);
+  const mimeType = mime.getType(filePath);
+  return `data:${mimeType};base64,${buffer.toString("base64")}`;
+};
+
+registerEvent("imagePathToBase64", imagePathToBase64);

src/main/events/profile/update-profile.ts

@@ -4,12 +4,11 @@ import axios from "axios";
 import fs from "node:fs";
 import mime from "mime";
 
-const patchUserProfile = (displayName: string, imageUrl?: string) => {
+const patchUserProfile = (displayName: string, profileImageUrl?: string) => {
-  return;
+  if (profileImageUrl) {
-  if (imageUrl) {
     return HydraApi.patch("/profile", {
       displayName,
-      imageUrl,
+      profileImageUrl,
     });
   } else {
     return HydraApi.patch("/profile", {

src/preload/index.ts

@@ -106,6 +106,8 @@ contextBridge.exposeInMainWorld("electron", {
   getVersion: () => ipcRenderer.invoke("getVersion"),
   getDefaultDownloadsPath: () => ipcRenderer.invoke("getDefaultDownloadsPath"),
   openExternal: (src: string) => ipcRenderer.invoke("openExternal", src),
+  imagePathToBase64: (filePath: string) =>
+    ipcRenderer.invoke("imagePathToBase64", filePath),
   showOpenDialog: (options: Electron.OpenDialogOptions) =>
     ipcRenderer.invoke("showOpenDialog", options),
   platform: process.platform,

src/renderer/src/declaration.d.ts

@@ -96,6 +96,7 @@ declare global {
 
     /* Misc */
     openExternal: (src: string) => Promise<void>;
+    imagePathToBase64: (filePath: string) => Promise<string>;
     getVersion: () => Promise<string>;
     ping: () => string;
     getDefaultDownloadsPath: () => Promise<string>;

src/renderer/src/pages/user/user-edit-modal.tsx

@@ -18,22 +18,28 @@ export const UserEditProfileModal = ({
 }: UserEditProfileModalProps) => {
   const [displayName, setDisplayName] = useState(userProfile.displayName);
   const [newImagePath, setNewImagePath] = useState<string | null>(null);
+  const [newImageBase64, setNewImageBase64] = useState<string | null>(null);
 
   const handleChangeProfileAvatar = async () => {
     const { filePaths } = await window.electron.showOpenDialog({
       properties: ["openFile"],
       filters: [
         {
-          name: "Profile avatar",
+          name: "Profile image",
-          extensions: ["jpg", "png", "gif"],
+          extensions: ["jpg", "png", "gif", "webp", "jpeg"],
         },
       ],
     });
 
-    const path = filePaths[0];
+    if (filePaths && filePaths.length > 0) {
-    console.log(path);
+      const path = filePaths[0];
 
-    setNewImagePath(path);
+      window.electron.imagePathToBase64(path).then((base64) => {
+        setNewImageBase64(base64);
+      });
+
+      setNewImagePath(path);
+    }
   };
 
   const handleSaveProfile = async () => {
@@ -67,7 +73,7 @@ export const UserEditProfileModal = ({
               <img
                 className={styles.profileAvatar}
                 alt={userProfile.displayName}
-                src={newImagePath ?? userProfile.profileImageUrl}
+                src={newImageBase64 ?? userProfile.profileImageUrl}
               />
             ) : (
               <PersonIcon size={72} />