diff --git a/packages/webui/src/client/lib/Components/Base64ImageInput.tsx b/packages/webui/src/client/lib/Components/Base64ImageInput.tsx
index a613b56e37..1cf046230b 100644
--- a/packages/webui/src/client/lib/Components/Base64ImageInput.tsx
+++ b/packages/webui/src/client/lib/Components/Base64ImageInput.tsx
@@ -20,10 +20,17 @@ export function Base64ImageInputControl({
 	const { t } = useTranslation()
 
 	const handleSelectFile = useCallback(
-		(fileContent: string) => {
-			if (typeof fileContent !== 'string' || !fileContent) return
+		(_fileContent: string, file: File) => {
+			if (!file) return
 
-			handleUpdate(fileContent)
+			const reader = new FileReader()
+			reader.readAsDataURL(file)
+			reader.onload = () => {
+				handleUpdate(reader.result as string)
+			}
+			reader.onerror = (error) => {
+				console.error('Error reading file:', error)
+			}
 		},
 		[handleUpdate]
 	)