From 5f04607a44ecff49ae903266c7377cc11dd7c32a Mon Sep 17 00:00:00 2001
From: Joedeep Singh <joedeepbrar@gmail.com>
Date: Thu, 3 Jul 2025 20:17:41 +0000
Subject: [PATCH] fix: Changed image extension validation to MIME type
 validation

---
 frontend/src/pages/BatchForm.vue  | 9 +++++----
 frontend/src/pages/CourseForm.vue | 9 +++++----
 frontend/src/pages/JobForm.vue    | 7 ++++---
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/BatchForm.vue b/frontend/src/pages/BatchForm.vue
index b90ff811..19f52343 100644
--- a/frontend/src/pages/BatchForm.vue
+++ b/frontend/src/pages/BatchForm.vue
@@ -209,7 +209,7 @@
 									v-slot="{ file, progress, uploading, openFileSelector }"
 								>
 									<div class="flex items-center">
-										<div class="border rounded-md w-fit py-5 px-20">
+										<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">
@@ -540,9 +540,10 @@ const removeImage = () => {
 }
 
 const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png'].includes(extension)) {
-		return 'Only image file is allowed.'
+	if (!file.type.startsWith('image/')) {
+		const errorMessage = __('Only image file is allowed.')
+		toast.error(errorMessage)
+		return errorMessage
 	}
 }
 
diff --git a/frontend/src/pages/CourseForm.vue b/frontend/src/pages/CourseForm.vue
index 154856bb..87041787 100644
--- a/frontend/src/pages/CourseForm.vue
+++ b/frontend/src/pages/CourseForm.vue
@@ -100,7 +100,7 @@
 										v-slot="{ file, progress, uploading, openFileSelector }"
 									>
 										<div class="flex items-center">
-											<div class="border rounded-md w-fit py-5 px-20">
+											<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">
@@ -592,9 +592,10 @@ watch(
 )
 
 const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png', 'webp'].includes(extension)) {
-		return __('Only image file is allowed.')
+	if (!file.type.startsWith('image/')) {
+		const errorMessage = __('Only image file is allowed.')
+		toast.error(errorMessage)
+		return errorMessage
 	}
 }
 
diff --git a/frontend/src/pages/JobForm.vue b/frontend/src/pages/JobForm.vue
index 80d87178..b0345f3c 100644
--- a/frontend/src/pages/JobForm.vue
+++ b/frontend/src/pages/JobForm.vue
@@ -294,9 +294,10 @@ const removeImage = () => {
 }
 
 const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png'].includes(extension)) {
-		return 'Only image file is allowed.'
+	if (!file.type.startsWith('image/')) {
+		const errorMessage = __('Only image file is allowed.')
+		toast.error(errorMessage)
+		return errorMessage
 	}
 }