Merge pull request #1621 from JoeBrar/fix/image-upload

fix: Changed image extension validation to MIME type validation

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">
+										<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,13 +547,6 @@ const removeImage = () => {
 	batch.image = null
 }
 
-const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png'].includes(extension)) {
-		return 'Only image file is allowed.'
-	}
-}
-
 const breadcrumbs = computed(() => {
 	let crumbs = [
 		{

frontend/src/pages/CourseForm.vue

@@ -106,7 +106,10 @@
 										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">
@@ -330,7 +333,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'
@@ -597,13 +605,6 @@ watch(
 	}
 )
 
-const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png', 'webp'].includes(extension)) {
-		return __('Only image file is allowed.')
-	}
-}
-
 const updateTags = () => {
 	if (newTag.value) {
 		course.tags = course.tags ? `${course.tags}, ${newTag.value}` : newTag.value

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,13 +293,6 @@ const removeImage = () => {
 	job.image = null
 }
 
-const validateFile = (file) => {
-	let extension = file.name.split('.').pop().toLowerCase()
-	if (!['jpg', 'jpeg', 'png'].includes(extension)) {
-		return 'Only image file is allowed.'
-	}
-}
-
 const jobTypes = computed(() => {
 	return [
 		{ label: 'Full Time', value: 'Full Time' },

frontend/src/utils/index.js

@@ -497,10 +497,13 @@ export function singularize(word) {
 	)
 }
 
-export const validateFile = (file) => {
+export const validateFile = (file, showToast = true) => {
-	let extension = file.name.split('.').pop().toLowerCase()
+	if (!file.type.startsWith('image/')) {
-	if (!['jpg', 'jpeg', 'png', 'webp'].includes(extension)) {
+		const errorMessage = __('Only image file is allowed.')
-		return __('Only image file is allowed.')
+		if (showToast) {
+			toast.error(errorMessage)
+		}
+		return errorMessage
 	}
 }