integrate file upload into save routine

src/components/admin/resources/form.tsx

@@ -486,7 +486,7 @@ const ResourceForm = ({
       ) : undefined}
       <form className="mx-auto flex max-w-2xl flex-col flex-col-reverse py-1 sm:flex-row sm:divide-x sm:py-4">
         <div className="my-5 mr-4 flex flex-col text-lg font-bold">
-          <ResourceLinkSubForm /> {/** //resource={resource} /> */}
+          <ResourceLinkSubForm />
         </div>
         <div>
           <h1 className="mx-4 mb-2 border-b border-neutral-400 text-xl font-bold sm:hidden">

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

@@ -59,19 +59,32 @@ const EditResourcePage = (
     onError: (error) => setServerError(error.message),
   });
 
-  const onSubmit: SubmitHandler<ResourceUpdateInput> = (data) => {
+  const onSubmit: SubmitHandler<ResourceUpdateInput> = async (data) => {
+    // TODO: Fix file upload, currently it is not updating correctly on the server side
+    // May also need to look into re-rendering static pages when icon changes
+    // Also need to add authentication of route!
     if (updateIconFile) {
-      console.log("we need to update the file!");
+      const data = new FormData();
+      data.append("photo", updateIconFile);
+
+      const uploadResponse = await fetch(
+        `/api/resources/photo/${resource.id}`,
+        {
+          method: "POST",
+          body: data,
+        }
+      );
+
+      console.log("uploading icon");
+
+      if (uploadResponse.status !== 200) {
+        setServerError(
+          "Failed uploading resource icon file. Changes did not save!"
+        );
+        throw new Error(JSON.stringify(uploadResponse));
+      }
     }
 
-    // const data = new FormData();
-    // data.append("photo", event.target.files[0]);
-
-    // await fetch(`/api/resources/photo/${resourceId}`, {
-    //   method: "POST",
-    //   body: data,
-    // });
-
     mutate(data);
   };