fix

client/src/components/customers/UpdateCustomer.js

@@ -6,7 +6,7 @@ import { AuthService, CustomerService, ResourceService, parseDateFromBackend } f
 import Select from 'react-select';
 import DatePicker from 'react-datepicker';
 import "react-datepicker/dist/react-datepicker.css";
-import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Modal, Button } from "react-bootstrap";
+import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Modal, Button, ProgressBar } from "react-bootstrap";
 import { 
   CUSTOMER_TYPE, CUSTOMER_TYPE_TEXT, 
   PROGRAM_TYPE, PROGRAM_TYPE_TEXT,
@@ -168,6 +168,8 @@ const UpdateCustomer = () => {
   const [notesForDriver, setNotesForDriver] = useState('');
   const [selectedFile, setSelectedFile] = useState();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [isAvatarUploading, setIsAvatarUploading] = useState(false);
+  const [avatarUploadProgress, setAvatarUploadProgress] = useState(0);
 
   const isFormUploaded = (fieldValue) => fieldValue === true || fieldValue === 'true';
 
@@ -864,21 +866,37 @@ const UpdateCustomer = () => {
     CustomerService.uploadCustomerFile(fd, urlParams.id, currentCustomer?.name || '', fileType);
   };
 
-  const saveCustomer = () => {
+  const saveCustomer = async () => {
     if (!validateCustomer()) {
       return;
     }
     
     const data = buildCustomerData();
     
-    const formData = new FormData();
-    formData.append("file", selectedFile);
     let payload = {id: urlParams.id, data, currentCustomer};
-    if (selectedFile) {
-      payload = Object.assign({}, payload, {avatar: formData})
-    }
     dispatch(updateCustomer(payload));
 
+    if (selectedFile) {
+      const formData = new FormData();
+      formData.append("file", selectedFile);
+      try {
+        setIsAvatarUploading(true);
+        setAvatarUploadProgress(0);
+        await CustomerService.uploadAvatar(urlParams.id, formData, {
+          onUploadProgress: (event) => {
+            if (!event?.total) return;
+            const progress = Math.round((event.loaded * 100) / event.total);
+            setAvatarUploadProgress(progress);
+          }
+        });
+      } catch (error) {
+        console.error('Error uploading avatar:', error);
+        window.alert('Profile picture upload failed. Customer data was saved.');
+      } finally {
+        setIsAvatarUploading(false);
+      }
+    }
+
     // Upload form files
     uploadFormFile(hipaaAuthorizationForm, 'hipaa_authorization_form');
     uploadFormFile(medicationManagementConsentForm, 'medication_management_consent_form');
@@ -1366,6 +1384,15 @@ const UpdateCustomer = () => {
                     <input type="file" onChange={(e) => setSelectedFile(e.target.files[0])}/>
                   </label>
                   <div className="file-name">{selectedFile?.name}</div>
+                  {isAvatarUploading && (
+                    <div style={{ width: '320px', marginTop: '8px' }}>
+                      <ProgressBar
+                        now={avatarUploadProgress}
+                        label={`${avatarUploadProgress}%`}
+                        animated={avatarUploadProgress < 100}
+                      />
+                    </div>
+                  )}
                 </div>
                 <div className="me-4">
                   <div className="field-label">Notes And Attachments</div>

client/src/services/CustomerService.js

@@ -46,12 +46,12 @@ const uploadDriverSignature = (filename, data, options = {}) => {
   })
 }
 
-const uploadAvatar = (filename, data) => {
+const uploadAvatar = (filename, data, requestConfig = {}) => {
   const safeFilename = `${filename || ''}`.trim();
   if (!safeFilename || safeFilename.includes('undefined') || safeFilename.includes('null')) {
     throw new Error('Invalid upload filename for avatar/signature.');
   }
-  return http.post(`/files/upload-general/${encodeURIComponent(safeFilename)}`, data);
+  return http.post(`/files/upload-general/${encodeURIComponent(safeFilename)}`, data, requestConfig);
 }
 
 const getAvatar = (filename) => {