upload working for avatar

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;
 
@@ -107,13 +126,18 @@ export default function Profile({ onBack }: ProfileProps) {
           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

@@ -120,21 +120,21 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       const arrayBuffer = await file.arrayBuffer();
       const binary = new Uint8Array(arrayBuffer);
 
-      const res = await fetch('/media/upload', {
+      const res = await api.post(
-        method: 'POST',
+        "/uploads",
-        headers: {
+        binary,
-          'Content-Type': file.type,
+        {
-          'Content-Disposition': `attachment; filename="${file.name}"`,
+          headers: {
-        },
+            "Content-Type": file.type,
-        body: binary,
+            "Content-Disposition": `attachment; filename="${file.name}"`,
-      });
+          },
+        }
+      );
 
-      if (!res.ok) throw new Error('Avatar upload failed');
+      return res.data.url;
-
+    } catch (err: any) {
-      const data = await res.json();
+      console.error("Avatar upload failed:", err);
-      return data.url; // "/media/uploads/uuid.jpg"
+      setError(err.response?.data?.detail || "Failed to upload avatar");
-    } catch (err) {
-      console.error('Failed to upload avatar:', err);
       return null;
     }
   };
@@ -146,18 +146,15 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     if (!currentUser) return;
 
     const url = await uploadAvatar(file);
-    if (!url) {
+    if (!url) return;
-      setError("Failed to upload avatar");
-      return;
-    }
 
-    // Update the user's avatar
+    // Now update the author document in DB
-    const updated = await updateProfile({
+    const updatedUser = await updateProfile({
       ...currentUser,
       avatar: url,
     });
 
-    return updated;
+    return updatedUser;
   };
 
   /** 🔹 On mount, try to fetch user if token exists */