fix: moved id to body to avoid cors error and better error handling

packages/backend/src/routes/avatar.ts

@@ -17,14 +17,14 @@ const s3Client = new S3Client(
 )
 
 export const handleAvatarUpload = async (req: Request, res: Response) => {
-  const key = req.headers['x-user-id'] as string
-
+  let key: string
   let base64String: string
   try {
     const parsed = JSON.parse(req.body.toString())
     base64String = parsed.data
+    key = parsed.id
   } catch {
-    base64String = req.body.data
+    return res.status(400).send('Could not JSON.parse() the request body')
   }
 
   if (!base64String) return res.status(400).send('No file provided in request')
@@ -50,7 +50,13 @@ export const handleAvatarUpload = async (req: Request, res: Response) => {
 }
 
 export const handleAvatarDeletion = async (req: Request, res: Response) => {
-  const key = req.headers['x-user-id'] as string
+  let key: string
+  try {
+    const parsed = JSON.parse(req.body.toString())
+    key = parsed.id
+  } catch {
+    return res.status(400).send('Could not JSON.parse() the request body')
+  }
 
   s3Client.send(
     new DeleteObjectCommand({

packages/frontend/src/components/avatar-settings.tsx

@@ -117,9 +117,8 @@ const AvatarSettings: React.FunctionComponent = () => {
         headers: {
           authorization: 'allow',
           'Content-Type': file.type,
-          'X-User-Id': currentUser.id,
         },
-        body: JSON.stringify({ data: base64String }),
+        body: JSON.stringify({ id: currentUser.id, data: base64String }),
         credentials: 'include',
       })
 
@@ -140,6 +139,13 @@ const AvatarSettings: React.FunctionComponent = () => {
             text: strings.settings.avatar.toasts.errorFileSize.description,
             type: 'error',
           })
+        } else {
+          addToast({
+            icon: 'Error',
+            title: `Error ${response.status}:`,
+            text: `${await response.text()}`,
+            type: 'error',
+          })
         }
       }
     }
@@ -155,15 +161,24 @@ const AvatarSettings: React.FunctionComponent = () => {
   async function removeAvatar() {
     if (!currentUser) return
 
-    await fetch(`${BackendUrl}/avatar`, {
+    const response = await fetch(`${BackendUrl}/avatar`, {
       method: 'DELETE',
       headers: {
         authorization: 'allow',
-        'X-User-Id': currentUser.id,
       },
+      body: JSON.stringify({ id: currentUser.id }),
       credentials: 'include',
     })
 
+    if (!response.ok) {
+      addToast({
+        icon: 'Error',
+        title: `Error ${response.status}:`,
+        text: `${await response.text()}`,
+        type: 'error',
+      })
+    }
+
     eventBus.emit('avatarUpdated', undefined)
   }