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
 	}
 }