[bugfix] Reset emoji fields on upload error (#2905)

1 files changed, 20 insertions, 17 deletions

diff --git a/web/source/settings/lib/form/file.tsx b/web/source/settings/lib/form/file.tsx
index 944d77ae1..cf9407827 100644
--- a/web/source/settings/lib/form/file.tsx
+++ b/web/source/settings/lib/form/file.tsx
@@ -27,6 +27,7 @@ import type {
 	HookOpts,
 	FileFormInputHook,
 } from "./types";
+import { Error as ErrorC } from "../../components/error";
 
 const _default = undefined;
 export default function useFileInput(
@@ -41,6 +42,15 @@ export default function useFileInput(
 	const [imageURL, setImageURL] = useState<string>();
 	const [info, setInfo] = useState<React.JSX.Element>();
 
+	function reset() {
+		if (imageURL) {
+			URL.revokeObjectURL(imageURL);
+		}
+		setImageURL(undefined);
+		setFile(undefined);
+		setInfo(undefined);
+	}
+
 	function onChange(e: React.ChangeEvent<HTMLInputElement>) {
 		const files = e.target.files;
 		if (!files) {
@@ -59,25 +69,18 @@ export default function useFileInput(
 			setImageURL(URL.createObjectURL(file));
 		}
 
-		let size = prettierBytes(file.size);
+		const sizePrettier = prettierBytes(file.size);
 		if (maxSize && file.size > maxSize) {
-			size = <span className="error-text">{size}</span>;
+			const maxSizePrettier = prettierBytes(maxSize);
+			setInfo(
+				<ErrorC
+					error={new Error(`file size ${sizePrettier} is larger than max size ${maxSizePrettier}`)}
+					reset={(reset)}
+				/>
+			);
+		} else {
+			setInfo(<>{file.name} ({sizePrettier})</>);
 		}
-
-		setInfo(
-			<>
-				{file.name} ({size})
-			</>
-		);
-	}
-
-	function reset() {
-		if (imageURL) {
-			URL.revokeObjectURL(imageURL);
-		}
-		setImageURL(undefined);
-		setFile(undefined);
-		setInfo(undefined);
 	}
 
 	const infoComponent = (