From ccbbaeb8435b41f9def2b58c3cd4cb50bec7d49a Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Sun, 21 Aug 2022 12:42:42 +0200
Subject: [PATCH] fix: Let upload-input also accept non-async-change-callbacks

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../upload-image-button.tsx                   |  1 -
 .../editor-page/sidebar/upload-input.tsx      | 21 +++++++++++--------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx b/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
index 3aa4999d1..5f5300a57 100644
--- a/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
@@ -36,7 +36,6 @@ export const UploadImageButton: React.FC = () => {
         .map((state) => extractSelectedText(state))
         .orElse(undefined)
       handleUpload(file, undefined, description)
-      return Promise.resolve()
     },
     [codeMirror, handleUpload]
   )
diff --git a/src/components/editor-page/sidebar/upload-input.tsx b/src/components/editor-page/sidebar/upload-input.tsx
index 35008181e..f5eb59379 100644
--- a/src/components/editor-page/sidebar/upload-input.tsx
+++ b/src/components/editor-page/sidebar/upload-input.tsx
@@ -13,7 +13,7 @@ import { cypressId } from '../../../utils/cypress-attribute'
 const log = new Logger('UploadInput')
 
 export interface UploadInputProps extends PropsWithDataCypressId {
-  onLoad: (file: File) => Promise<void>
+  onLoad: (file: File) => Promise<void> | void
   allowedFileTypes: string
   onClickRef: MutableRefObject<(() => void) | undefined>
 }
@@ -33,19 +33,22 @@ export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, allowedFileTyp
   }, [])
 
   const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
-    (event) => {
+    async (event) => {
       const fileInput = event.currentTarget
       if (!fileInput.files || fileInput.files.length < 1) {
         return
       }
       const file = fileInput.files[0]
-      onLoad(file)
-        .then(() => {
-          fileInput.value = ''
-        })
-        .catch((error: Error) => {
-          log.error('Error while uploading file', error)
-        })
+      try {
+        const loadResult = onLoad(file)
+        if (loadResult instanceof Promise) {
+          await loadResult
+        }
+      } catch (error) {
+        log.error('Error while uploading file', error)
+      } finally {
+        fileInput.value = ''
+      }
     },
     [onLoad]
   )