bumped up version to 0.2.1 for avatar upload and update profile with uploaded avatar URL

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "dev": "vite",

src/blog/components/ArticleMeta.tsx

@@ -30,7 +30,12 @@ export function ArticleMeta({
             <Avatar
               key={index}
               alt={author.name}
-              src={author.avatar}
+              src={
+                (import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+                  "/" +
+                  (author.avatar?.replace(/^\/+/, "") || "")
+                )
+              }
               sx={{ width: 24, height: 24 }}
             />
           ))}

src/blog/components/Profile.tsx

@@ -17,18 +17,22 @@ interface ProfileProps {
 }
 
 export default function Profile({ onBack }: ProfileProps) {
-  const { currentUser, loading, error, logout, updateProfile } = useAuth();
+  const { currentUser, loading, error, logout, updateProfile, updateAvatar } = useAuth();
   const [formData, setFormData] = React.useState({
     username: currentUser?.username || '',
     name: currentUser?.name || '',
     email: currentUser?.email || '',
     avatar: currentUser?.avatar || '',
   });
+
+  const [avatarFile, setAvatarFile] = React.useState<File | null>(null);
+  const [uploadingAvatar, setUploadingAvatar] = React.useState(false);
   const [success, setSuccess] = React.useState<string | null>(null);
   const [saving, setSaving] = React.useState(false);
 
   React.useEffect(() => {
     if (currentUser) setFormData(currentUser);
+    console.log("Current User:", currentUser);
   }, [currentUser]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -36,6 +40,21 @@ export default function Profile({ onBack }: ProfileProps) {
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
+  const handleAvatarUpload = async (file: File) => {
+    setUploadingAvatar(true);
+
+    try {
+      const updated = await updateAvatar(file);
+      if (updated) {
+        setFormData((prev) => ({ ...prev, avatar: updated.avatar }));
+      }
+    } catch (err) {
+      console.error("Avatar upload failed:", err);
+    } finally {
+      setUploadingAvatar(false);
+    }
+  };
+
   const handleSave = async () => {
     if (!currentUser) return;
 
@@ -44,8 +63,6 @@ export default function Profile({ onBack }: ProfileProps) {
       setSuccess(null);
 
       const updatedUser = { ...currentUser, ...formData };
-      console.log('updatedUser');
-      console.log(updatedUser);
       const updated = await updateProfile(updatedUser);
 
       if (updated) setSuccess('Profile updated successfully');
@@ -57,8 +74,8 @@ export default function Profile({ onBack }: ProfileProps) {
   };
 
   const handleLogout = async () => {
-    logout()
+    logout();
-  }
+  };
 
   if (!currentUser) {
     return (
@@ -105,17 +122,27 @@ export default function Profile({ onBack }: ProfileProps) {
 
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
         <Avatar
-          src={formData.avatar}
+          src={
+            (import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+              "/" +
+              (formData.avatar?.replace(/^\/+/, "") || "")
+            )
+          }
           alt={formData.name || formData.username}
           sx={{ width: 64, height: 64 }}
         />
-        <TextField
+
-          label="Avatar URL"
+        <Button variant="outlined" component="label">
-          name="avatar"
+          {uploadingAvatar ? "Uploading..." : "Upload Avatar"}
-          fullWidth
+          <input
-          value={formData.avatar}
+            type="file"
-          onChange={handleChange}
+            accept="image/*"
+            hidden
+            onChange={(e) => {
+              if (e.target.files?.[0]) handleAvatarUpload(e.target.files[0]);
+            }}
           />
+        </Button>
       </Box>
 
       <TextField

src/blog/providers/Author.tsx

@@ -19,7 +19,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       setError(null);
 
       const res = await api.post('/auth/register', { username, password });
-      return res.data; // returns PublicUser from the backend
+      return res.data;
     } catch (err: any) {
       console.error('Registration failed:', err);
       setError(err.response?.data?.detail || 'Registration failed');
@@ -95,7 +95,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   };
 
-
   /** 🔹 Auto-load current user if token exists */
   const fetchCurrentUser = async () => {
     if (!token) return;
@@ -113,6 +112,51 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     }
   };
 
+  /** --------------------------------------------
+   * 🔹 Upload avatar binary → return URL
+   * -------------------------------------------- */
+  const uploadAvatar = async (file: File): Promise<string | null> => {
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const binary = new Uint8Array(arrayBuffer);
+
+      const res = await api.post(
+        "/uploads",
+        binary,
+        {
+          headers: {
+            "Content-Type": file.type,
+            "Content-Disposition": `attachment; filename="${file.name}"`,
+          },
+        }
+      );
+
+      return res.data.url;
+    } catch (err: any) {
+      console.error("Avatar upload failed:", err);
+      setError(err.response?.data?.detail || "Failed to upload avatar");
+      return null;
+    }
+  };
+
+  /** --------------------------------------------
+   * 🔹 Full flow: upload avatar → update profile
+   * -------------------------------------------- */
+  const updateAvatar = async (file: File) => {
+    if (!currentUser) return;
+
+    const url = await uploadAvatar(file);
+    if (!url) return;
+
+    // Now update the author document in DB
+    const updatedUser = await updateProfile({
+      ...currentUser,
+      avatar: url,
+    });
+
+    return updatedUser;
+  };
+
   /** 🔹 On mount, try to fetch user if token exists */
   useEffect(() => {
     if (token) fetchCurrentUser();
@@ -131,6 +175,8 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
         register,
         refreshAuthors,
         updateProfile,
+        uploadAvatar,
+        updateAvatar,
       }}
     >
       {children}

src/blog/types/contexts.ts

@@ -18,4 +18,6 @@ export interface AuthContextModel {
   logout: () => void;
   refreshAuthors: () => Promise<void>;
   updateProfile: (user: AuthorModel) => Promise<AuthorModel | void>;
+  uploadAvatar: (file: File) => Promise<string | null>;
+  updateAvatar: (file: File) => Promise<AuthorModel | undefined>;
 }