add icon image selected preview

src/components/admin/resources/form.tsx

@@ -53,22 +53,30 @@ export type ResourceUpdateInput = RouterInputs["auditoryResource"]["update"];
  *
  * File needs to be path relative to resource_logos/
  */
-const SelectImageInput = ({ file }: { file?: string }) => {
-  const { getValues } = useFormContext<ResourceUpdateInput>();
+const SelectImageInput = ({
+  file,
+  setIconFile,
+}: {
+  file?: string;
+  setIconFile: (file: File) => void;
+}) => {
+  const [previewImg, setPreviewImg] = useState<string | undefined>(
+    `/resource_logos/${file ?? ""}`
+  );
 
-  const onChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    const data = new FormData();
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (!event.target.files || !event.target.files[0]) {
       return;
     }
 
-    const resourceId = getValues("id");
-    data.append("photo", event.target.files[0]);
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreviewImg(reader.result as string);
+    };
+    reader.readAsDataURL(file);
 
-    await fetch(`/api/resources/photo/${resourceId}`, {
-      method: "POST",
-      body: data,
-    });
+    setIconFile(file);
   };
 
   return (
@@ -79,7 +87,7 @@ const SelectImageInput = ({ file }: { file?: string }) => {
       >
         <Image
           className="w-full"
-          src={`/resource_logos/${file ?? ""}`}
+          src={previewImg ?? ""}
           alt={`resource logo`}
           width={512}
           height={512}
@@ -89,13 +97,7 @@ const SelectImageInput = ({ file }: { file?: string }) => {
         </div>
       </label>
       <input
-        onChange={(event) => {
-          onChange(event).catch(() => {
-            throw new Error(
-              "Unexpected error occured when selecting new file."
-            );
-          });
-        }}
+        onChange={onChange}
         accept="image/*"
         id="resource-image-file"
         type="file"
@@ -333,8 +335,10 @@ const PaymentTypeOption = ({
  */
 function ResourceSummarySubForm({
   resource,
+  setIconFile,
 }: {
   resource?: ResourceUpdateInput;
+  setIconFile: (file: File) => void;
 }) {
   const { register } = useFormContext<ResourceUpdateInput>();
 
@@ -342,7 +346,7 @@ function ResourceSummarySubForm({
     <div className="space-y-4 px-4">
       <div className="flex flex-row space-x-4 sm:mt-4">
         <div className="flex w-20 flex-col justify-center space-y-2 sm:w-28">
-          <SelectImageInput file={resource?.icon} />
+          <SelectImageInput file={resource?.icon} setIconFile={setIconFile} />
         </div>
         <div className="flex flex-col justify-center overflow-hidden rounded-xl border border-neutral-400 bg-white drop-shadow-lg sm:w-[300px] md:w-[400px]">
           <h2 className="border-b border-neutral-300 px-2 text-center font-semibold">
@@ -462,10 +466,12 @@ const ResourceDescriptionSubForm = () => {
 };
 
 const ResourceForm = ({
+  setIconFile,
   methods,
   resource,
   error,
 }: {
+  setIconFile: (file: File) => void;
   resource?: ResourceUpdateInput;
   methods: UseFormReturn<ResourceUpdateInput>;
   error?: string;
@@ -487,7 +493,10 @@ const ResourceForm = ({
             General
           </h1>
           <div className="justify-left mx-auto flex max-w-lg flex-col space-y-4 pb-5">
-            <ResourceSummarySubForm resource={resource} />
+            <ResourceSummarySubForm
+              resource={resource}
+              setIconFile={setIconFile}
+            />
             <ResourceDescriptionSubForm />
           </div>
         </div>

src/pages/resources/[id]/edit.tsx

@@ -46,6 +46,7 @@ const EditResourcePage = (
   props: InferGetServerSidePropsType<typeof getServerSideProps>
 ) => {
   const { resource } = props;
+  const [updateIconFile, setIconFile] = useState<File | undefined>(undefined);
   const [serverError, setServerError] = useState<string | undefined>(undefined);
   const formMethods = useForm<ResourceUpdateInput>({
     defaultValues: resource as ResourceUpdateInput,
@@ -59,6 +60,18 @@ const EditResourcePage = (
   });
 
   const onSubmit: SubmitHandler<ResourceUpdateInput> = (data) => {
+    if (updateIconFile) {
+      console.log("we need to update the file!");
+    }
+
+    // const data = new FormData();
+    // data.append("photo", event.target.files[0]);
+
+    // await fetch(`/api/resources/photo/${resourceId}`, {
+    //   method: "POST",
+    //   body: data,
+    // });
+
     mutate(data);
   };
 
@@ -102,6 +115,7 @@ const EditResourcePage = (
       >
         <main className="mb-12">
           <ResourceForm
+            setIconFile={setIconFile}
             methods={formMethods}
             error={serverError}
             resource={resource as ResourceUpdateInput}