did not figure it out yet

components/editable/EditableFilePicker.tsx

@@ -7,7 +7,7 @@ import { Editable } from "./Editable";
  * 
  * Value is the file's [fakepath](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value), as a string.
  */
-export function EditableFile(props: HTMLProps<HTMLInputElement> & { value: string }) {
+export function EditableFilePicker(props: HTMLProps<HTMLInputElement> & { value: File | "" }) {
     return (
         <Editable
             editing={

hooks/useFilePickerState.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent, useCallback, useState } from "react";
+
+
+type FileState = {
+    value: string,
+    file: File | null,
+}
+
+
+export function useFilePickerState() {
+    const [state, setState] = useState<FileState>({ value: "", file: null })
+
+    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setState({
+            value: e.target.value,
+            file: e.target.files![0],
+        })
+    }
+
+    return { state, onChange }
+}

hooks/useFileState.ts

@@ -1,58 +0,0 @@
-import { useReducer } from "react";
-
-
-type FileState = {
-    value: string,
-    file: File,
-    url: URL,
-}
-
-type FileActionClear = { type: "clear" }
-type FileActionSet = { type: "set", value: string, file: File }
-
-type FileAction = FileActionClear | FileActionSet
-
-
-function fileReducer(state, action) {
-    switch (action.type) {
-        case "clear":
-
-        case "set":
-
-    }
-}
-
-
-export function useFileState() {
-    const [value, dispatch] = useReducer(
-    )
-
-    /*
-    const [value, setValue] = useState<string>("")
-    const [file, setFile] = useState<File | null>(null)
-
-    const onChange = useCallback(
-        (e: ChangeEvent<HTMLInputElement>) => {
-            setValue(e.target.value)
-            const file = e.target.files![0]
-            setFile(file ?? null)
-        },
-        []
-    )
-
-    const doClear = useCallback(
-        () => {
-            setValue("")
-            setFile(null)
-        },
-        []
-    )
-
-    return {
-        value,
-        file,
-        onChange,
-        doClear,
-    }
-    */
-}

pages/events/[slug].tsx

@@ -10,14 +10,14 @@ import { EditableText } from "../../components/editable/EditableText";
 import { ToolToggleEditing } from "../../components/tools/ToolToggleEditing";
 import { EditingContext } from "../../components/editable/EditingContext";
 import { database } from "../../utils/prismaClient";
-import { EditableFile } from "../../components/editable/EditableFile";
+import { EditableFilePicker } from "../../components/editable/EditableFilePicker";
 import { ViewEvent } from "../../components/view/ViewEvent";
 import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
 import { EditableDateRange } from "../../components/editable/EditableDateRange";
 import { WorkInProgress } from "../../components/WorkInProgress";
 import { FormDateRange } from "../../components/form/FormDateRange";
 import { Postcard } from "../../components/postcard/Postcard";
-import { useFileState } from "../../hooks/useFileState";
+import { useFilePickerState } from "../../hooks/useFilePickerState";
 
 
 export async function getServerSideProps(context: NextPageContext) {
@@ -53,7 +53,7 @@ export default function PageEventDetail({ event }: PageEventDetailProps) {
     const editState = useState<boolean>(false)
     const [title, setTitle] = useState<string>(event.name)
     const [description, setDescription] = useState<string>(event.description)
-    const postcard = useFileState()
+    const [postcard, setPostcard] = useState<File | "">("")
     const [startingAt, setStartingAt] = useState<string>(event.startingAt?.toISOString() ?? "")
     const [endingAt, setEndingAt] = useState<string>(event.endingAt?.toISOString() ?? "")
 
@@ -62,7 +62,7 @@ export default function PageEventDetail({ event }: PageEventDetailProps) {
             <title key="title">{event.name} - {t("siteTitle")}</title>
         </Head>
         <WorkInProgress />
-        <Postcard src={postcard.file ? URL.createObjectURL(postcard.file) : event.postcard ?? undefined} />
+        <Postcard src={postcard ? URL.createObjectURL(postcard) : event.postcard ?? undefined} />
         <EditingContext.Provider value={editState}>
             <ToolBar vertical="vadapt" horizontal="right">
                 <ToolToggleEditing />
@@ -77,9 +77,9 @@ export default function PageEventDetail({ event }: PageEventDetailProps) {
                     />
                 }
                 postcard={
-                    <EditableFile
+                    <EditableFilePicker
-                        value={postcard.value}
+                        value={postcard}
-                        onChange={postcard.onChange}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) => e.target.files ? setPostcard(e.target.files[0] ?? null) : setPostcard(null)}
                         placeholder={t("eventDetailsPostcardPlaceholder")}
                     />
                 }