fixed image upload input failure not erroring

DA0-DA0 · Sep 24, 2024 · f74fb8a · f74fb8a
1 parent 62aff6c
commit f74fb8a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/...s/widgets/RetroactiveCompensation/Renderer/components/stateless/ContributionFormInput.tsx b/...s/widgets/RetroactiveCompensation/Renderer/components/stateless/ContributionFormInput.tsx
@@ -1,6 +1,7 @@
 import { Close } from '@mui/icons-material'
 import { ComponentType } from 'react'
 import { useFieldArray, useFormContext } from 'react-hook-form'
+import toast from 'react-hot-toast'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -18,6 +19,7 @@ import {
 } from '@dao-dao/stateless'
 import { TransProps } from '@dao-dao/types'
 import {
+  processError,
   transformIpfsUrlToHttpsIfNecessary,
   validateRequired,
 } from '@dao-dao/utils'
@@ -125,6 +127,7 @@ export const ContributionFormInput = ({
                         setValue(`files.${index}.url`, url)
                         setValue(`files.${index}.mimetype`, file.type)
                       }}
+                      onError={(err) => toast.error(processError(err))}
                     />
                   ) : (
                     <FileUploadInput
@@ -134,6 +137,7 @@ export const ContributionFormInput = ({
                         setValue(`files.${index}.url`, url)
                         setValue(`files.${index}.mimetype`, file.type)
                       }}
+                      onError={(err) => toast.error(processError(err))}
                     />
                   ))
                 )}

diff --git a/packages/stateless/components/inputs/ImageDropInput.tsx b/packages/stateless/components/inputs/ImageDropInput.tsx
@@ -1,6 +1,6 @@
 import { CloudDownloadRounded, CloudUploadRounded } from '@mui/icons-material'
 import clsx from 'clsx'
-import { ComponentType, useEffect, useState } from 'react'
+import { ComponentType, MutableRefObject, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { TransProps } from '@dao-dao/types'
@@ -12,6 +12,10 @@ export type ImageDropInputProps = Pick<
   FileDropInputProps,
   'onSelect' | 'className' | 'loading'
 > & {
+  /**
+   * Ref that gets set to a function that clears the image.
+   */
+  clearImageRef?: MutableRefObject<() => void>
   currentImage?: string
   Trans: ComponentType<TransProps>
 }
@@ -20,6 +24,7 @@ export const ImageDropInput = ({
   onSelect: _onSelect,
   className,
   loading,
+  clearImageRef,
   currentImage,
   Trans,
 }: ImageDropInputProps) => {
@@ -32,6 +37,10 @@ export const ImageDropInput = ({
     _onSelect(file, url)
   }
 
+  if (clearImageRef) {
+    clearImageRef.current = () => setImage(undefined)
+  }
+
   // If passed in image changes, update the image.
   useEffect(() => {
     if (currentImage) {

diff --git a/packages/stateless/components/inputs/ImageUploadInput.tsx b/packages/stateless/components/inputs/ImageUploadInput.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
 import { ImageDropInput, ImageDropInputProps } from './ImageDropInput'
 
@@ -16,6 +16,7 @@ export const ImageUploadInput = ({
   ...props
 }: ImageUploadInputProps) => {
   const [uploading, setUploading] = useState(false)
+  const clearImageRef = useRef<() => void>(() => {})
 
   const uploadFile = async (file: File) => {
     setUploading(true)
@@ -47,10 +48,18 @@ export const ImageUploadInput = ({
     } catch (err) {
       console.error(err)
       onError?.(err)
+      clearImageRef.current()
     } finally {
       setUploading(false)
     }
   }
 
-  return <ImageDropInput loading={uploading} onSelect={uploadFile} {...props} />
+  return (
+    <ImageDropInput
+      clearImageRef={clearImageRef}
+      loading={uploading}
+      onSelect={uploadFile}
+      {...props}
+    />
+  )
 }