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)
+ }}
>
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
}
-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
}