diff --git a/packages/react-kit/src/components/form/Field.styles.ts b/packages/react-kit/src/components/form/Field.styles.ts index 0c0f1b955..aa4b2c016 100644 --- a/packages/react-kit/src/components/form/Field.styles.ts +++ b/packages/react-kit/src/components/form/Field.styles.ts @@ -125,6 +125,7 @@ export type FileUploadWrapperTheme = Partial<{ error: Partial<{ borderColor: CSSProperties["borderColor"]; }>; + overrides: Partial; }>; export const FileUploadWrapper = styled.div<{ $error: unknown; @@ -188,13 +189,16 @@ export const FileUploadWrapper = styled.div<{ cursor: not-allowed; opacity: 0.5; } + ${({ theme: { overrides } }) => overrides} `; export const FieldFileUpload = styled(FieldInput)` display: none; `; -export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>` +export const FieldFileUploadWrapper = styled.div<{ + $disabled: boolean; +}>` position: relative; display: inline-block; ${({ $disabled }) => diff --git a/packages/react-kit/src/components/form/Upload/BaseUpload.tsx b/packages/react-kit/src/components/form/Upload/BaseUpload.tsx index d847377c6..3575c0402 100644 --- a/packages/react-kit/src/components/form/Upload/BaseUpload.tsx +++ b/packages/react-kit/src/components/form/Upload/BaseUpload.tsx @@ -9,7 +9,7 @@ import { theme } from "../../../theme"; import Loading from "../../ui/loading/LoadingWrapper"; import ThemedButton from "../../ui/ThemedButton"; import { Typography } from "../../ui/Typography"; -import Error from "../Error"; +import ErrorComponent from "../Error"; import { FieldFileUploadWrapper, FieldInput, @@ -52,6 +52,7 @@ function BaseUpload({ // eslint-disable-next-line @typescript-eslint/no-unused-vars removeFile, saveButtonTheme, + errorComponent, theme, ...props }: UploadPropsWithNoIpfs & WithUploadToIpfsProps) { @@ -60,6 +61,7 @@ function BaseUpload({ const [isLoading, setIsLoading] = useState(false); const [preview, setPreview] = useState(); const [field, meta, helpers] = useField(name); + const [errorMesage, setErrorMessage] = useState(); const handleLoading = useCallback( (loadingValue: boolean) => { @@ -216,16 +218,26 @@ function BaseUpload({ helpers.setTouched(true); } handleLoading(true); - const files = await saveToIpfs(efiles); - if (files) { - setFiles(files); - } else { - setFiles([]); - console.warn( - `There has been an error because 'files' ${files} is falsy in handleSave` - ); + try { + const files = await saveToIpfs(efiles, { throwOnError: true }); + setErrorMessage(undefined); + if (files) { + setFiles(files); + } else { + setFiles([]); + console.warn( + `There has been an error because 'files' ${files} is falsy in handleSave` + ); + } + } catch (err) { + if (err instanceof Error) { + setErrorMessage(err.message); + } else { + setErrorMessage("Something went wrong"); + } + } finally { + handleLoading(false); } - handleLoading(false); }, [meta.touched, handleLoading, saveToIpfs, helpers, setFiles] ); @@ -263,6 +275,7 @@ function BaseUpload({ }} /> )} + {errorMesage && errorComponent?.(errorMesage)} )} - + ); } diff --git a/packages/react-kit/src/components/form/Upload/WithUploadToIpfs.tsx b/packages/react-kit/src/components/form/Upload/WithUploadToIpfs.tsx index 45c063fa6..cbf17ab0d 100644 --- a/packages/react-kit/src/components/form/Upload/WithUploadToIpfs.tsx +++ b/packages/react-kit/src/components/form/Upload/WithUploadToIpfs.tsx @@ -22,7 +22,8 @@ export const SUPPORTED_FORMATS = [ ]; export interface WithUploadToIpfsProps { saveToIpfs: ( - files: File[] | null + files: File[] | null, + options?: { throwOnError?: boolean } ) => Promise; loadMedia: (src: string) => Promise; removeFile: (src: string) => Promise; @@ -39,7 +40,10 @@ export function WithUploadToIpfs

( const { saveFile, loadMedia, removeFile } = useSaveImageToIpfs(); const saveToIpfs: WithUploadToIpfsProps["saveToIpfs"] = useCallback( - async (filesArray: File[] | null) => { + async ( + filesArray: File[] | null, + options: { throwOnError?: boolean } = {} + ) => { if (!filesArray) { return; } @@ -53,10 +57,12 @@ export function WithUploadToIpfs

( const err = `File ${ file?.name } size cannot exceed more than ${bytesToSize(sizeValidation)}!`; + if (options?.throwOnError) throw new Error(err); filesErrors.push(err); } if (!formatValidation.includes(file?.type)) { const err = `Uploaded file has unsupported format of ${file?.type}!`; + if (options?.throwOnError) throw new Error(err); filesErrors.push(err); } } diff --git a/packages/react-kit/src/components/form/types.ts b/packages/react-kit/src/components/form/types.ts index 66bb0ae5e..7703e28d7 100644 --- a/packages/react-kit/src/components/form/types.ts +++ b/packages/react-kit/src/components/form/types.ts @@ -137,8 +137,12 @@ export type UploadProps = BaseProps & { borderRadiusUnit?: "px" | "%"; width?: number; height?: number; + errorComponent?: (errorMessage: string) => React.ReactNode; imgPreviewStyle?: Pick; - theme?: Partial<{ triggerTheme: FileUploadWrapperTheme }>; + theme?: Partial<{ + triggerTheme: FileUploadWrapperTheme; + overrides: React.CSSProperties; + }>; } & ( | { withEditor: true; diff --git a/packages/react-kit/src/theme.ts b/packages/react-kit/src/theme.ts index 3d45b3313..99092e8f7 100644 --- a/packages/react-kit/src/theme.ts +++ b/packages/react-kit/src/theme.ts @@ -30,7 +30,8 @@ export const theme = { cyan: "#00FFFF", lightArrowColor: "#dedfe3", darkGreyTimeStamp: "#E8EAF1", - lightGrey2: "#eff0f7" + lightGrey2: "#eff0f7", + greyText: "rgba(28, 13, 24, 0.75)" } }, mobile: "768px",