PROFILE
- - setDisplayName(e.target.value)} style={inputStyle} /> -{me.email}
+
+ {avatarUrl && (
+ 
+ )}
+
+
+ setDisplayName(e.target.value)} style={inputStyle} />
+
+ {me.email}
+AVATAR
+
+ {
+ console.log("File input changed", e.target.files);
+ const file = e.target.files?.[0];
+ if (file) {
+ console.log("Selected file:", file.name, file.type, file.size);
+ setUploading(true);
+
+ try {
+ // Check file size and resize if needed
+ const maxSize = 4 * 1024 * 1024; // 4MB (more conservative to account for base64 overhead)
+ let processedFile = file;
+
+ if (file.size > maxSize) {
+ console.log("File too large, resizing...");
+ processedFile = await resizeImage(file, 800, 800); // Max 800x800
+ }
+
+ const formData = new FormData();
+ formData.append('file', processedFile, processedFile.name || file.name);
+
+ console.log("Uploading file to /auth/me/avatar");
+ console.log("Final file size:", processedFile.size);
+ const response = await api.upload('/auth/me/avatar', formData);
+ console.log("Upload response:", response);
+
+ setAvatarUrl(response.avatar_url || '');
+ qc.invalidateQueries({ queryKey: ['me'] });
+ qc.invalidateQueries({ queryKey: ['comments'] });
+ } catch (err) {
+ console.error("Upload failed:", err);
+ let errorMessage = 'Failed to upload avatar. Please try again.';
+
+ if (err instanceof Error) {
+ errorMessage = err.message;
+ if (err.message.includes('413')) {
+ errorMessage = 'File too large. Maximum size is 5MB. Please choose a smaller image.';
+ } else if (err.message.includes('422')) {
+ errorMessage = 'Invalid image file. Please upload a valid image (JPG, PNG, etc.).';
+ }
+ } else if (typeof err === 'object' && err !== null) {
+ // Try to extract more details from the error object
+ console.error("Error details:", JSON.stringify(err));
+ const errorObj = err as { status?: number; data?: { detail?: string } };
+ if (errorObj.status === 422 && errorObj.data?.detail) {
+ errorMessage = errorObj.data.detail;
+ }
+ }
+
+ setError(errorMessage);
+ } finally {
+ setUploading(false);
+ }
+ }
+ }}
+ style={{ display: "none" }}
+ id="avatar-upload"
+ />
+
+
+
+ {avatarUrl && (
+
+ {
+ console.error("Failed to load avatar:", avatarUrl);
+ // Set to default avatar on error
+ setAvatarUrl(`https://api.dicebear.com/9.x/identicon/svg?seed=${me.id}&backgroundType=gradientLinear&size=128`);
+ }}
+ />
+
+
+ )}
+ {error}
} {saved &&Settings saved.
}