From 1b7b869fdbf09c01a4e3152d640246d2dcc1de27 Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Wed, 25 Oct 2023 20:39:53 +0200
Subject: [PATCH] Remove 'Uploading <name>...' from text input on error

---
 components/form.js  | 5 +++++
 components/image.js | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/form.js b/components/form.js
index ff24e6d4..ded9bfe5 100644
--- a/components/form.js
+++ b/components/form.js
@@ -254,6 +254,11 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
                 const s3Keys = [...text.matchAll(AWS_S3_URL_REGEXP)].map(m => Number(m[1]))
                 updateImageFees({ variables: { s3Keys } })
               }}
+              onError={({ name }) => {
+                let text = innerRef.current.value
+                text = text.replace(`![Uploading ${name}…]()`, '')
+                helpers.setValue(text)
+              }}
             >
               <AddImageIcon width={18} height={18} />
             </ImageUpload>
diff --git a/components/image.js b/components/image.js
index 08fdc0fb..4ab7a518 100644
--- a/components/image.js
+++ b/components/image.js
@@ -137,7 +137,7 @@ export default function ZoomableImage ({ src, srcSet, ...props }) {
   return <ImageOriginal src={originalUrl} onClick={handleClick} {...props} />
 }
 
-export function ImageUpload ({ children, className, onSelect, onSuccess }) {
+export function ImageUpload ({ children, className, onSelect, onSuccess, onError }) {
   const ref = useRef()
   const toaster = useToast()
 
@@ -166,6 +166,7 @@ export function ImageUpload ({ children, className, onSelect, onSuccess }) {
         ({ data } = await getSignedPOST({ variables }))
       } catch (e) {
         toaster.danger(e.message || e.toString?.())
+        onError?.({ ...variables, name: file.name, file })
         return
       }
 
@@ -184,6 +185,7 @@ export function ImageUpload ({ children, className, onSelect, onSuccess }) {
       if (!res.ok) {
         // TODO make sure this is actually a helpful error message and does not expose anything to the user we don't want
         toaster.danger(res.statusText)
+        onError?.({ ...variables, name: file.name, file })
         return
       }