From d71f1c7f9a08fd3e40132e71f16261904f0835d5 Mon Sep 17 00:00:00 2001
From: Joedeep Singh <joedeepbrar@gmail.com>
Date: Fri, 4 Jul 2025 13:22:25 +0000
Subject: [PATCH] refactor: updated the validateFile function in utils and
 reused it

---
 frontend/src/pages/BatchForm.vue  | 20 ++++++++++----------
 frontend/src/pages/CourseForm.vue | 20 ++++++++++----------
 frontend/src/pages/JobForm.vue    | 10 +---------
 frontend/src/utils/index.js       | 11 +++++++----
 4 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/frontend/src/pages/BatchForm.vue b/frontend/src/pages/BatchForm.vue
index 19f52343..140147c3 100644
--- a/frontend/src/pages/BatchForm.vue
+++ b/frontend/src/pages/BatchForm.vue
@@ -209,7 +209,10 @@
 									v-slot="{ file, progress, uploading, openFileSelector }"
 								>
 									<div class="flex items-center">
-										<div class="border rounded-md w-fit py-5 px-20 cursor-pointer" @click="openFileSelector">
+										<div
+											class="border rounded-md w-fit py-5 px-20 cursor-pointer"
+											@click="openFileSelector"
+										>
 											<Image class="size-5 stroke-1 text-ink-gray-7" />
 										</div>
 										<div class="ml-4">
@@ -323,7 +326,12 @@ import { useOnboarding } from 'frappe-ui/frappe'
 import { sessionStore } from '../stores/session'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
 import Link from '@/components/Controls/Link.vue'
-import { openSettings, getMetaInfo, updateMetaInfo } from '@/utils'
+import {
+	openSettings,
+	getMetaInfo,
+	updateMetaInfo,
+	validateFile,
+} from '@/utils'
 
 const router = useRouter()
 const user = inject('$user')
@@ -539,14 +547,6 @@ const removeImage = () => {
 	batch.image = null
 }
 
-const validateFile = (file) => {
-	if (!file.type.startsWith('image/')) {
-		const errorMessage = __('Only image file is allowed.')
-		toast.error(errorMessage)
-		return errorMessage
-	}
-}
-
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{
diff --git a/frontend/src/pages/CourseForm.vue b/frontend/src/pages/CourseForm.vue
index 87041787..d1c5332e 100644
--- a/frontend/src/pages/CourseForm.vue
+++ b/frontend/src/pages/CourseForm.vue
@@ -100,7 +100,10 @@
 										v-slot="{ file, progress, uploading, openFileSelector }"
 									>
 										<div class="flex items-center">
-											<div class="border rounded-md w-fit py-5 px-20 cursor-pointer" @click="openFileSelector">
+											<div
+												class="border rounded-md w-fit py-5 px-20 cursor-pointer"
+												@click="openFileSelector"
+											>
 												<Image class="size-5 stroke-1 text-ink-gray-7" />
 											</div>
 											<div class="ml-4">
@@ -324,7 +327,12 @@ import { useRouter } from 'vue-router'
 import { capture, startRecording, stopRecording } from '@/telemetry'
 import { useOnboarding } from 'frappe-ui/frappe'
 import { sessionStore } from '../stores/session'
-import { openSettings, getMetaInfo, updateMetaInfo } from '@/utils'
+import {
+	openSettings,
+	getMetaInfo,
+	updateMetaInfo,
+	validateFile,
+} from '@/utils'
 import Link from '@/components/Controls/Link.vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
@@ -591,14 +599,6 @@ watch(
 	}
 )
 
-const validateFile = (file) => {
-	if (!file.type.startsWith('image/')) {
-		const errorMessage = __('Only image file is allowed.')
-		toast.error(errorMessage)
-		return errorMessage
-	}
-}
-
 const updateTags = () => {
 	if (newTag.value) {
 		course.tags = course.tags ? `${course.tags}, ${newTag.value}` : newTag.value
diff --git a/frontend/src/pages/JobForm.vue b/frontend/src/pages/JobForm.vue
index b0345f3c..6bd59e33 100644
--- a/frontend/src/pages/JobForm.vue
+++ b/frontend/src/pages/JobForm.vue
@@ -151,7 +151,7 @@ import { computed, onMounted, reactive, inject } from 'vue'
 import { FileText, X } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import { useRouter } from 'vue-router'
-import { getFileSize } from '@/utils'
+import { getFileSize, validateFile } from '@/utils'
 
 const user = inject('$user')
 const router = useRouter()
@@ -293,14 +293,6 @@ const removeImage = () => {
 	job.image = null
 }
 
-const validateFile = (file) => {
-	if (!file.type.startsWith('image/')) {
-		const errorMessage = __('Only image file is allowed.')
-		toast.error(errorMessage)
-		return errorMessage
-	}
-}
-
 const jobTypes = computed(() => {
 	return [
 		{ label: 'Full Time', value: 'Full Time' },
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 836912b9..08fcdb9a 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -497,10 +497,13 @@ export function singularize(word) {
 	)
 }
 
-export const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png', 'webp'].includes(extension)) {
-		return __('Only image file is allowed.')
+export const validateFile = (file, showToast = true) => {
+	if (!file.type.startsWith('image/')) {
+		const errorMessage = __('Only image file is allowed.')
+		if (showToast) {
+			toast.error(errorMessage)
+		}
+		return errorMessage
 	}
 }