feat: Photo profile update

Author: d-arsya

src/admin/pages/ProfileEditPage.tsx

@@ -87,34 +87,34 @@ export default function ProfileEditPage() {
     };
 
     const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file || !profile?.id) return;
+    const file = e.target.files?.[0];
+    if (!file || !profile?.id) return;
 
-        try {
-            setUploadingAvatar(true);
-            const formDataUpload = new FormData();
-            formDataUpload.append('files', file);
-            formDataUpload.append('ref', 'api::profile.profile');
-            formDataUpload.append('refId', String(profile.id));
-            formDataUpload.append('field', 'avatar');
-
-            const uploadResponse = await fetch('/api/upload', {
-                method: 'POST',
-                body: formDataUpload,
-            });
+    try {
+        setUploadingAvatar(true);
 
-            if (uploadResponse.ok) {
-                const uploadedFiles = await uploadResponse.json();
-                if (uploadedFiles?.[0]) {
-                    setProfile(prev => prev ? { ...prev, avatar: uploadedFiles[0] } : null);
-                }
-            }
-        } catch (err) {
-            console.error('Error uploading avatar:', err);
-        } finally {
-            setUploadingAvatar(false);
+        const formData = new FormData();
+        formData.append('avatar', file);
+
+        // send the profile id in query or body
+        const uploadResponse = await fetch(`/api/profiles/avatar?userId=${user.id}`, {
+            method: 'PUT',
+            body: formData,
+        });
+
+        if (!uploadResponse.ok) throw new Error('Upload failed');
+
+        const uploadedFiles = await uploadResponse.json();
+        if (uploadedFiles?.[0]) {
+            setProfile(prev => prev ? { ...prev, avatar: uploadedFiles[0] } : null);
         }
-    };
+    } catch (err) {
+        console.error('Error uploading avatar:', err);
+    } finally {
+        setUploadingAvatar(false);
+    }
+};
+
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -194,7 +194,7 @@ export default function ProfileEditPage() {
                                 </Box>
                             )}
                         </Box>
-                    {/* <Box>
+                    <Box>
                         <Button
                         variant="secondary"
                         startIcon={<Upload />}
@@ -212,7 +212,7 @@ export default function ProfileEditPage() {
                         <Typography variant="pi" textColor="neutral600" marginTop={2}>
                             JPG, PNG or GIF. Max size 2MB.
                         </Typography>
-                    </Box> */}
+                    </Box>
                     </Flex>
                     <Flex gap={4} wrap="wrap">
                         <Box flex="1" minWidth="280px">

src/api/profile/controllers/profile.ts

@@ -3,6 +3,7 @@
  */
 
 import { factories } from '@strapi/strapi';
+import profile from '../services/profile';
 
 export default factories.createCoreController('api::profile.profile', ({ strapi }) => ({
     async getMe(ctx) {
@@ -83,15 +84,50 @@ export default factories.createCoreController('api::profile.profile', ({ strapi
             }, 
         });
 
-        // await strapi.documents('admin::user').update({
-        //     documentId: profile.user.documentId,
-        //     data: {
-        //         firstname: data.firstname,
-        //         lastname: data.lastname,
-        //         email: data.email,
-        //     },                                                                          
-        // });
-
         return { data:profile };
     },
+    async updateAvatar(ctx) {
+        const { userId } = ctx.query;
+        const userIdNumber = Number(userId);
+
+        if (Number.isNaN(userIdNumber)) {
+            return ctx.badRequest('Invalid userId');
+        }
+
+        const { avatar } = ctx.request.files;
+        if (!avatar) {
+            return ctx.badRequest('No file uploaded');
+        }
+
+        // Find the profile
+        const profiles = await strapi.entityService.findMany('api::profile.profile', {
+            filters: {
+                user: {
+                    id: userIdNumber
+                }
+            },
+            populate: {
+                avatar: true,
+                user: true,
+            },
+            limit: 1,
+        });
+
+        const profile = profiles[0];
+        if (!profile) return ctx.notFound('Profile not found for this user');
+
+        // Upload avatar
+        const uploaded = await strapi.plugin('upload').service('upload').upload({
+            data: {
+                ref: 'api::profile.profile',
+                refId: profile.id,
+                field: 'avatar',
+            },
+            files: avatar,
+        });
+
+        ctx.body = uploaded;
+        return uploaded;
+    }
+
 }));

src/api/profile/routes/custom-profile.ts

@@ -16,5 +16,13 @@ export default {
                 auth: false
             },
         },
+        {
+            method: 'PUT',
+            path: '/profiles/avatar',
+            handler: 'api::profile.profile.updateAvatar',
+            config: {
+                auth: false
+            },
+        },
     ],
 };

src/extensions/documentation/documentation/1.0.0/full_documentation.json

@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2026-01-23T10:52:37.730Z"
+    "x-generation-date": "2026-01-23T11:44:52.992Z"
   },
   "servers": [
     {