Implement error handling

ui/src/components/ErrorAlert.tsx

+import {Paper} from "@material-ui/core";
+
+export interface ErrorAlertProps {
+    severity: string,
+    error: unknown,
+}
+
+export function ErrorAlert({severity, error}: ErrorAlertProps) {
+    if (!error) {
+        return null;
+    }
+
+    return (
+        <Paper variant="outlined" color={severity}>
+            <strong>Error</strong>: {"" + error}
+        </Paper>
+    )
+}

ui/src/components/ErrorContext.tsx

+import {createContext, FC, FunctionComponent, PropsWithChildren, useCallback, useContext, useState} from "react";
+import {createPortal} from "react-dom";
+
+type ChildrenComponent = FunctionComponent<PropsWithChildren<{}>>;
+
+const ErrorContext = createContext<ChildrenComponent | null>(null);
+
+export function useErrorDisplay(): [FC, ChildrenComponent] {
+    const [ref, setRef] = useState<HTMLDivElement | null>(null);
+    const errorDisplay = useCallback(
+        () => (
+            <div ref={setRef}/>
+        ),
+        []
+    );
+    const errorRenderer: ChildrenComponent = useCallback(
+        ({children}: PropsWithChildren<{}>) => ref && createPortal(
+            children,
+            ref
+        ),
+        [ref]
+    );
+    const errorWrapper = useCallback(
+        ({children}: PropsWithChildren<{}>) => (
+            <ErrorContext.Provider value={errorRenderer}>
+                {children}
+            </ErrorContext.Provider>
+        ),
+        [errorRenderer]
+    );
+
+    return [errorDisplay, errorWrapper];
+}
+
+export const ErrorPortal: ChildrenComponent = (props: PropsWithChildren<{}>) => {
+    const errorRenderer = useContext(ErrorContext);
+    if (!errorRenderer) {
+        return null;
+    }
+
+    return errorRenderer(props);
+}

ui/src/components/UploadView.tsx

 import {useUploadImage} from "../api/useUploadImage";
+import {ErrorPortal} from "./ErrorContext";
+import {ErrorAlert} from "./ErrorAlert";
+import {LinearProgress} from "@material-ui/core";
 
 export default function UploadView() {
-    const {mutate: upload, error: uploadError, isLoading: uploadLoading} = useUploadImage();
+    const {mutate: upload, error, isLoading} = useUploadImage();
 
     return (
         <div>
-            <pre>Error: {JSON.stringify(uploadError, null, 2)}</pre>
-            <pre>Loading: {JSON.stringify(uploadLoading, null, 2)}</pre>
+            {isLoading && (
+                <LinearProgress/>
+            )}
+            <ErrorPortal>
+                <ErrorAlert severity="error" error={error}/>
+            </ErrorPortal>
             <input
                 type="file"
+                disabled={isLoading}
                 onChange={async ({target}) => {
                     if (target.files) {
                         await upload(target.files)