From a0d6cc685f50fe85d71d544d87b9d4492ee6558c Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Wed, 16 Feb 2022 00:24:34 +0100
Subject: [PATCH] better error handling for fileinput

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
---
 src/components/InputFile.vue  | 30 +++++++++++++++++++++++++-----
 src/config/locales/de-DE.json |  3 ++-
 src/config/locales/en-US.json |  3 ++-
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/InputFile.vue b/src/components/InputFile.vue
index a4cd5c3..8bb5a76 100644
--- a/src/components/InputFile.vue
+++ b/src/components/InputFile.vue
@@ -77,15 +77,29 @@ const props = defineProps({
   },
 })
 
-const { value, errorMessage } = useField(props.name, undefined, {})
+const { value, errorMessage, setErrors } = useField(props.name, undefined, {})
 
-const convertBase64 = (file: File): Promise<string> => {
+const convertBase64 = (file: File): Promise<string | null> => {
   return new Promise((resolve, reject) => {
     const fileReader = new FileReader()
     fileReader.readAsDataURL(file)
 
+    let image = new Image()
     fileReader.onload = () => {
-      resolve(fileReader.result as string)
+      image.src = fileReader.result as string
+      image.onload = function () {
+        var height = image.height
+        var width = image.width
+        if (height > 200 || width > 200) {
+          setErrors([
+            t(
+              'components.wishlist-header.main.form.image-file.error-image-size'
+            ),
+          ])
+          return resolve('')
+        }
+        resolve(fileReader.result as string)
+      }
     }
 
     fileReader.onerror = (error) => {
@@ -94,13 +108,19 @@ const convertBase64 = (file: File): Promise<string> => {
   })
 }
 
+const handleFile = async (file: File) => {
+  const base64String = await convertBase64(file)
+  if (base64String) value.value = base64String
+}
+
 const handleChange = async (event: any) => {
   const file = (event.target as FileEventTarget).files[0]
-  value.value = await convertBase64(file)
+  handleFile(file)
 }
 const handleDrop = async (event: any) => {
+  showDropzone.value = false
   let droppedFiles = event.dataTransfer.files
   if (!droppedFiles) return
-  value.value = await convertBase64(droppedFiles[0])
+  handleFile(droppedFiles[0])
 }
 </script>
diff --git a/src/config/locales/de-DE.json b/src/config/locales/de-DE.json
index 4a51327..278f0ca 100644
--- a/src/config/locales/de-DE.json
+++ b/src/config/locales/de-DE.json
@@ -104,7 +104,8 @@
             "label": "Bild-Datei",
             "text-dropzone-link": "hier",
             "text-dropzone": "Ziehen Sie ein beliebiges Bild hierher oder klicken Sie {0}, um den Dialog zu öffnen.",
-            "error-requried": "Bild-Datei wird benötigt"
+            "error-requried": "Bild-Datei wird benötigt",
+            "error-image-size": "Höhe und Breite dürfen 200px nicht überschreiten."
           },
           "submit": {
             "text": "Speichern"
diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json
index 35ecbec..e0a0936 100644
--- a/src/config/locales/en-US.json
+++ b/src/config/locales/en-US.json
@@ -102,7 +102,8 @@
             "label": "Image-File",
             "text-dropzone-link": "click here",
             "text-dropzone": "drag and drop any image here or {0} to open dialog.",
-            "error-requried": "Image-File is required"
+            "error-requried": "Image-File is required",
+            "error-image-size": "Height and Width must not exceed 200px."
           },
           "submit": {
             "text": "Save"