From 6224c3eadc8648c8b4f7d4b92d6a4816fe401d0a Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Sun, 8 Jun 2025 12:30:51 +0530
Subject: [PATCH 1/3] refactor: DRY up validate image file

* Also, allows more types of image files

(cherry picked from commit c6ad10857a3241fc2b9741d0298db034b01b789c)

# Conflicts:
#	frontend/src/pages/Contact.vue
#	frontend/src/pages/Lead.vue
#	frontend/src/pages/MobileContact.vue
---
 .../Settings/ProfileImageEditor.vue           | 10 ++--------
 frontend/src/pages/Contact.vue                | 14 ++++++--------
 frontend/src/pages/Lead.vue                   | 19 +++++++++++--------
 frontend/src/pages/MobileContact.vue          | 14 ++++++--------
 frontend/src/pages/MobileOrganization.vue     | 11 ++---------
 frontend/src/pages/Organization.vue           | 11 ++---------
 frontend/src/utils/index.js                   |  7 +++++++
 7 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/Settings/ProfileImageEditor.vue b/frontend/src/components/Settings/ProfileImageEditor.vue
index 8703561b..26a14e88 100644
--- a/frontend/src/components/Settings/ProfileImageEditor.vue
+++ b/frontend/src/components/Settings/ProfileImageEditor.vue
@@ -1,7 +1,7 @@
 <template>
   <FileUploader
     @success="(file) => setUserImage(file.file_url)"
-    :validateFile="validateFile"
+    :validateFile="validateIsImageFile"
   >
     <template v-slot="{ file, progress, error, uploading, openFileSelector }">
       <div class="flex flex-col items-center">
@@ -48,17 +48,11 @@
 </template>
 <script setup>
 import { FileUploader } from 'frappe-ui'
+import { validateIsImageFile } from '@/utils';
 
 const profile = defineModel()
 
 function setUserImage(url) {
   profile.value.user_image = url
 }
-
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg'].includes(extn)) {
-    return 'Only PNG and JPG images are allowed'
-  }
-}
 </script>
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 912a6d14..1fed080d 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -17,7 +17,7 @@
       <div class="border-b">
         <FileUploader
           @success="changeContactImage"
-          :validateFile="validateFile"
+          :validateFile="validateIsImageFile"
         >
           <template #default="{ openFileSelector, error }">
             <div class="flex flex-col items-start justify-start gap-4 p-5">
@@ -184,8 +184,13 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
+<<<<<<< HEAD
 import { formatDate, timeAgo } from '@/utils'
 import { showAddressModal, addressProps } from '@/composables/modals'
+=======
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
+>>>>>>> c6ad1085 (refactor: DRY up validate image file)
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { getMeta } from '@/stores/meta'
@@ -294,13 +299,6 @@ usePageMeta(() => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 async function changeContactImage(file) {
   await call('frappe.client.set_value', {
     doctype: 'Contact',
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index f722054c..6b68058b 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -71,7 +71,7 @@
       </div>
       <FileUploader
         @success="(file) => updateField('image', file.file_url)"
-        :validateFile="validateFile"
+        :validateFile="validateIsImageFile"
       >
         <template #default="{ openFileSelector, error }">
           <div class="flex items-center justify-start gap-5 border-b p-5">
@@ -344,8 +344,18 @@ import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import SLASection from '@/components/SLASection.vue'
 import CustomActions from '@/components/CustomActions.vue'
+<<<<<<< HEAD
 import { openWebsite, setupCustomizations, copyToClipboard } from '@/utils'
 import { showQuickEntryModal, quickEntryProps } from '@/composables/modals'
+=======
+import {
+  openWebsite,
+  setupAssignees,
+  setupCustomizations,
+  copyToClipboard,
+  validateIsImageFile
+} from '@/utils'
+>>>>>>> c6ad1085 (refactor: DRY up validate image file)
 import { getView } from '@/utils/view'
 import { getSettings } from '@/stores/settings'
 import { sessionStore } from '@/stores/session'
@@ -575,13 +585,6 @@ watch(tabs, (value) => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
   cache: ['sidePanelSections', 'CRM Lead'],
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 5f74ad89..ea601ca5 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -11,7 +11,7 @@
     </header>
   </LayoutHeader>
   <div v-if="contact.data" class="flex flex-col h-full overflow-hidden">
-    <FileUploader @success="changeContactImage" :validateFile="validateFile">
+    <FileUploader @success="changeContactImage" :validateFile="validateIsImageFile">
       <template #default="{ openFileSelector, error }">
         <div class="flex flex-col items-start justify-start gap-4 p-4">
           <div class="flex gap-4 items-center">
@@ -167,7 +167,12 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
+<<<<<<< HEAD
 import { formatDate, timeAgo } from '@/utils'
+=======
+import AddressModal from '@/components/Modals/AddressModal.vue'
+import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
+>>>>>>> c6ad1085 (refactor: DRY up validate image file)
 import { getView } from '@/utils/view'
 import { showAddressModal, addressProps } from '@/composables/modals'
 import { getSettings } from '@/stores/settings'
@@ -266,13 +271,6 @@ usePageMeta(() => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 async function changeContactImage(file) {
   await call('frappe.client.set_value', {
     doctype: 'Contact',
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index 98f71b01..5ed074af 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -13,7 +13,7 @@
   <div v-if="organization.doc" class="flex flex-col h-full overflow-hidden">
     <FileUploader
       @success="changeOrganizationImage"
-      :validateFile="validateFile"
+      :validateFile="validateIsImageFile"
     >
       <template #default="{ openFileSelector, error }">
         <div class="flex flex-col items-start justify-start gap-4 p-4">
@@ -164,7 +164,7 @@ import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
-import { formatDate, timeAgo } from '@/utils'
+import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
 import {
   Breadcrumbs,
   Avatar,
@@ -251,13 +251,6 @@ usePageMeta(() => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 async function changeOrganizationImage(file) {
   await call('frappe.client.set_value', {
     doctype: 'CRM Organization',
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index dcd458ca..a339e75d 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -17,7 +17,7 @@
       <div class="border-b">
         <FileUploader
           @success="changeOrganizationImage"
-          :validateFile="validateFile"
+          :validateFile="validateIsImageFile"
         >
           <template #default="{ openFileSelector, error }">
             <div class="flex flex-col items-start justify-start gap-4 p-5">
@@ -185,7 +185,7 @@ import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { getView } from '@/utils/view'
-import { formatDate, timeAgo } from '@/utils'
+import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
 import {
   Tooltip,
   Breadcrumbs,
@@ -286,13 +286,6 @@ usePageMeta(() => {
   }
 })
 
-function validateFile(file) {
-  let extn = file.name.split('.').pop().toLowerCase()
-  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
-    return __('Only PNG and JPG images are allowed')
-  }
-}
-
 async function changeOrganizationImage(file) {
   await call('frappe.client.set_value', {
     doctype: 'CRM Organization',
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 82911a00..68a2abe2 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -394,6 +394,13 @@ export function isImage(extention) {
   )
 }
 
+export function validateIsImageFile(file) {
+  const extn = file.name.split('.').pop().toLowerCase()
+  if (!isImage(extn)) {
+    return __('Only image files are allowed')
+  }
+}
+
 export function getRandom(len = 4) {
   let text = ''
   const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

From f44e12b0ff2dea52fcc20f9101461a6c946b083c Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Sun, 8 Jun 2025 12:36:39 +0530
Subject: [PATCH 2/3] fix: unused import due to merge conflict

(cherry picked from commit 42285dd9110f74494314bd090f4df08794a1c8f0)

# Conflicts:
#	frontend/src/pages/Contact.vue
---
 frontend/src/pages/Contact.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index 1fed080d..f8b2fa54 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -185,10 +185,13 @@ import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 <<<<<<< HEAD
+<<<<<<< HEAD
 import { formatDate, timeAgo } from '@/utils'
 import { showAddressModal, addressProps } from '@/composables/modals'
 =======
 import AddressModal from '@/components/Modals/AddressModal.vue'
+=======
+>>>>>>> 42285dd9 (fix: unused import due to merge conflict)
 import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
 >>>>>>> c6ad1085 (refactor: DRY up validate image file)
 import { getView } from '@/utils/view'

From 37df5d62541752d4cfbcc599f56dc7053bc23faa Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Sun, 8 Jun 2025 12:37:15 +0530
Subject: [PATCH 3/3] fix: yet another unused import due to merge conflict

(cherry picked from commit ab409dfd2c01d63952ed863496dc69ea1968e246)

# Conflicts:
#	frontend/src/pages/MobileContact.vue
---
 frontend/src/pages/MobileContact.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index ea601ca5..66989de1 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -168,9 +168,12 @@ import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 <<<<<<< HEAD
+<<<<<<< HEAD
 import { formatDate, timeAgo } from '@/utils'
 =======
 import AddressModal from '@/components/Modals/AddressModal.vue'
+=======
+>>>>>>> ab409dfd (fix: yet another unused import due to merge conflict)
 import { formatDate, timeAgo, validateIsImageFile } from '@/utils'
 >>>>>>> c6ad1085 (refactor: DRY up validate image file)
 import { getView } from '@/utils/view'