Skip to content

Profile Settings UX Improvements

✅ Implemented

1. Change Tracking

The profile form now tracks whether you've made any changes: - Compares current form values with original values from database - Detects changes to: first_name, last_name, phone, bio, instrument

2. Smart Save Button

The "Save Changes" button now has three states:

No Changes (Disabled) 

[Save Changes]  (grayed out, disabled)
"No changes to save"

Has Changes (Enabled) 

[Save Changes]  (orange, clickable)

Saving 

[Saving...]  (orange, disabled while processing)

Just Saved 

[✓ Saved!]  (with green checkmark)
"Changes saved successfully!"

The "Saved!" message shows for 3 seconds after successful save.

3. Visual Feedback

  • Disabled state: Gray background, cursor-not-allowed
  • Enabled state: Orange (#F39C12) background, hover effect
  • Saved state: Green checkmark + success message
  • Hint text: "No changes to save" when button is disabled

Avatar Upload Debugging

What Should Happen:

  1. Click "Upload Image"
  2. Select image file (PNG, JPG up to 5MB)
  3. File uploads to /api/core/users/me/ endpoint
  4. Gets saved to media/avatars/ directory
  5. Avatar URL returned in response
  6. UI updates with new avatar

Media Files Configuration ✅

  • MEDIA_URL = 'media/' ✅
  • MEDIA_ROOT = BASE_DIR / 'media' ✅
  • Directory created: media/avatars/ ✅
  • Permissions: 755 ✅
  • URLs configured in development ✅

Debug Logging Added

When you upload, check browser console for: 

Avatar upload started: filename.jpg image/jpeg 123456
Avatar upload failed: [error object]
Error response: {...}
Error status: 400/500

Common Avatar Upload Issues:

  1. CORS Error
  2. Error: "blocked by CORS policy"

  3. Fix: Add frontend URL to Django CORS_ALLOWED_ORIGINS

  4. File Size

  5. Error: "File too large"

  6. Check: Is file < 5MB?

  7. File Type

  8. Error: "Invalid file type"

  9. Check: Is it PNG/JPG/JPEG?

  10. Permissions

  11. Error: "Permission denied"

  12. Check: chmod 755 media/avatars/

  13. Serializer

  14. Error: "This field is required" for avatar
  15. Issue: Serializer not handling file uploads properly

Testing Avatar Upload

  1. Open browser developer tools (Console tab)
  2. Go to Settings → Profile
  3. Click "Upload Image"
  4. Select a small image file (< 1MB)
  5. Watch console for logs:
  6. Should see "Avatar upload started"
  7. If error: See detailed error message
  8. If success: See "Avatar upload successful"

Next Steps if Still Not Working

If avatar upload still fails after these changes:

  1. Check console for exact error message
  2. Check Django logs for backend errors
  3. Test with curl: 
    curl -X PATCH http://localhost:8000/api/core/users/me/ \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -F "avatar=@/path/to/image.jpg"

Code Changes

Files Modified:

  • ✅ frontend/app/dashboard/settings/page.tsx
  • Added justSaved state
  • Added originalFormData tracking
  • Added hasChanges() function
  • Updated save button with conditional styling
  • Added visual feedback messages

  • Enhanced avatar upload error logging

  • ✅ backend/media/avatars/ directory created

Next Enhancements:

  • [ ] Add image cropping tool
  • [ ] Add zoom/pan before upload
  • [ ] Preview avatar before saving
  • [ ] Drag & drop upload
  • [ ] Webcam capture option