Fix: Profile picture upload AJAX response handling

- Add dataType: 'json' to AJAX call to properly parse JSON response
- Add Content-Type header to upload_profile_picture.php
- Add error callback with console logging for debugging
- Remove manual JSON parsing since jQuery handles it with dataType

src/pages/other/account_settings.php

@@ -168,12 +168,8 @@ $user = $result->fetch_assoc();
                 data: formData,
                 contentType: false,
                 processData: false,
+                dataType: 'json',
                 success: function(response) {
-                    // Parse response if needed
-                    if (typeof response === "string") {
-                        response = JSON.parse(response);
-                    }
-
                     if (response.status === 'success') {
                         $('#responseMessage').html('<div class="alert alert-success">' + response.message + '</div>');
                         // Reload the current page after a short delay
@@ -184,8 +180,10 @@ $user = $result->fetch_assoc();
                         $('#responseMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
                     }
                 },
-                error: function() {
-                    $('#responseMessage').html('<div class="alert alert-danger">Error uploading profile picture.</div>');
+                error: function(xhr, status, error) {
+                    console.log('AJAX Error:', status, error);
+                    console.log('Response Text:', xhr.responseText);
+                    $('#responseMessage').html('<div class="alert alert-danger">Error uploading profile picture: ' + error + '</div>');
                 }
             });
         });