Memory Wiki

Let me read all three files to understand the current state before making changes.

The template file is empty and the JS file doesn't exist at that path. Let me find the actual files.

Good, found them in the `profe-theme` directory. Let me read both.

Let me read the rest of the template to see the profile_pic and banner cards.

Let me check the BP upload handlers to understand their signatures.

Let me also check BP's existing avatar AJAX upload handler:

Now I have a complete understanding of the BP upload internals. Let me implement all three files. **Step 1: Update the mu-plugin PHP with new AJAX handlers**

**Step 2: Update the JavaScript file** — replace redirect button with inline file upload

**Step 3: Update the template** — replace profile_pic card body content

Now replace the actions section for profile_pic/banner cards:

**Step 4: Add CSS for the file input styling** in the mu-plugin CSS

Let me clean up the localized script vars (no longer needed) and check the enqueue setup:

Now let me verify the complete state of all modified files:

Let me verify the template file's card HTML around the profile_pic and banner sections:

Let me verify the complete mu-plugin file to make sure everything is correct:

Let me check if the enqueue path is correct:

Let me also verify the PHP template file has proper PHP syntax:

All changes are complete with no syntax errors. Here's a summary: --- ## Summary ### What was done Replaced the BP redirect buttons ("Upload via BuddyPress") in the **profile_pic** and **banner** cards with inline file inputs and AJAX upload using BuddyPress's internal upload handlers. ### Files modified **1. `/var/www/html/wp-content/mu-plugins/profe-profile-cards.php`** - **Added inline CSS** (lines 393-437): New styles for `.card-file-input-wrap`, `.card-file-input` (visually hidden), `.card-file-label` (styled as a button with dark theme), and `.card-file-preview`. - **Removed `bpAvatarUrl` and `bpCoverUrl`** from the `wp_localize_script` call (these are no longer needed since we no longer redirect to BP's native upload pages). - **Added `profe_ajax_upload_avatar()`** (line 493): New `wp_ajax_profe_upload_avatar` handler that uploads profile photos using BP's `bp_core_avatar_handle_upload()`, deletes the existing avatar via `bp_core_delete_existing_avatar()`, then crops via `bp_core_avatar_handle_crop()` with full dimensions. Returns the new avatar URL. - **Added `profe_ajax_upload_cover()`** (line 565): New `wp_ajax_profe_upload_cover` handler that uploads cover images using `BP_Attachment_Cover_Image::upload()`, generates the fitted cover image via `bp_attachments_cover_image_generate_file()`, and fires `members_cover_image_uploaded`. Returns the new cover URL. - Both handlers use the same nonce (`profe_profile_card_nonce`) as the existing AJAX system, check login/auth, and trigger `profe_profile_field_saved` for the profile completion tracker. **2. `/var/www/html/wp-content/themes/profe-theme/assets/js/profe-profile-cards.js`** - **Added file input change handler** (`.card-file-input` `change` event): Uses `FileReader` to generate a data-URI preview of the selected image and shows it in the `.card-file-preview` div. - **Replaced the redirect click handler** for `.card-upload-btn`: Now detects the slug (`profile_pic` or `banner`), validates a file is selected, constructs a `FormData` object with the file, and sends it via `$.ajax` to the appropriate AJAX action (`profe_upload_avatar` or `profe_upload_cover`). Shows loading spinner during upload. - **Added `updateImageDisplay()`**: Updates the card's avatar/cover display on successful upload (replaces the current image with the new URL) and also updates the sidebar header avatar. - **Added reset logic** when opening a card: clears file input, preview, and messages. - Old `bpAvatarUrl`/`bpCoverUrl` references removed. **3. `/var/www/html/wp-content/themes/profe-theme/page-templates/community-3col.php`** - **profile_pic card body**: Added `<div class="card-file-preview" style="display:none">` after the current avatar display. - **banner card body**: Added `<div class="card-file-preview" style="display:none">` after the current cover display. - **Actions section** for image cards: Replaced the single "Upload via BuddyPress" button with: - A hidden file input + styled "Choose File" label - A "Cancel" button - An "Upload" button ### BP internals used - **`bp_core_avatar_handle_upload($file, $upload_dir_filter)`** — uploads avatar file using `BP_Attachment_Avatar`, shrinks if needed, stores in `$bp->avatar_admin->image->file` - **`bp_core_delete_existing_avatar()`** — removes old avatar files before setting new ones - **`bp_core_avatar_handle_crop()`** — crops the uploaded image to BP's full avatar dimensions (center crop, full image) - **`bp_core_avatar_full_width/height()`** — gets the configured avatar dimensions - **`BP_Attachment_Cover_Image::upload()`** — handles cover image file upload/validation - **`bp_attachments_cover_image_upload_dir()`** — gets the BP cover image upload directory settings - **`bp_attachments_cover_image_generate_file()`** — fits the uploaded image to cover dimensions, saves to the proper directory, and cleans up old files - **`do_action('bp_core_avatar_uploaded')`** and **`do_action('members_cover_image_uploaded')`** — fires BP's standard hooks for compatibility