fix file upload

src/components/ResourcePhoto.tsx

@@ -46,7 +46,7 @@ export const ResourcePhoto = (input: ResourcePhotoProps) => {
   return (
     <Image
       className="w-full rounded-xl border border-neutral-400 bg-white drop-shadow-lg"
-      src={blobSrc ?? `/resource_logos/${input.src ?? "logo_not_found.png"}`}
+      src={`/resource_logos/${input.src ?? "logo_not_found.png"}`}
       alt={`${input.name} logo`}
       {...commonProps}
     />

src/components/admin/resources/form.tsx

@@ -41,6 +41,7 @@ import Modal from "react-modal";
 import { type RouterInputs } from "~/utils/api";
 import { PlatformLinkButton } from "~/pages/resources/[id]";
 import { ResourcePhoto } from "~/components/ResourcePhoto";
+import Image from "next/image";
 
 // Required for accessibility
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
@@ -90,10 +91,12 @@ const SelectImageInput = ({
             src={resource?.icon}
           />
         ) : (
-          <ResourcePhoto
+          <Image
-            photo={null}
+            className="w-full"
-            src={previewImg}
+            src={previewImg ?? ""}
-            name={resource?.name ?? "n/a"}
+            alt={`resource logo`}
+            width={512}
+            height={512}
           />
         )}
         <div className="absolute bottom-0 left-0 right-0 top-0 hidden place-items-center group-hover:grid group-hover:bg-white/70">

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

@@ -17,6 +17,7 @@ const EditResourcePage = () => {
   const router = useRouter();
   const id = router.query["id"]?.toString() ?? "";
 
+  // TODO: Maybe useWait id before querying
   const { data: resource } = api.auditoryResource.byId.useQuery({ id });
 
   const [updateIconFile, setIconFile] = useState<File | undefined>(undefined);
@@ -26,37 +27,44 @@ const EditResourcePage = () => {
   });
 
   const { mutate } = api.auditoryResource.update.useMutation({
-    onSuccess: (_data) => {
+    onSuccess: async (_data) => {
+      if (!resource) {
+        setServerError("An unexpected error has occured");
+        return;
+      }
+
       setServerError(undefined);
+
+      if (updateIconFile) {
+        const data = new FormData();
+        data.append("photo", updateIconFile);
+
+        if (!resource?.id) {
+          throw Error("Resource data missing for photo to upload");
+        }
+
+        const uploadResponse = await fetch(
+          `/api/resources/photo/${resource.id}`,
+          {
+            method: "POST",
+            body: data,
+          }
+        );
+
+        if (uploadResponse.status !== 200) {
+          setServerError(
+            "Failed uploading resource icon file. Changes did not save!"
+          );
+          throw new Error(JSON.stringify(uploadResponse));
+        }
+      }
+
+      await router.push(`/resources/${resource.id}`);
     },
     onError: (error) => setServerError(error.message),
   });
 
-  const onSubmit: SubmitHandler<ResourceUpdateInput> = async (data) => {
+  const onSubmit: SubmitHandler<ResourceUpdateInput> = (data) => {
-    if (updateIconFile) {
-      const data = new FormData();
-      data.append("photo", updateIconFile);
-
-      if (!resource?.id) {
-        throw Error("Resource data missing for photo to upload");
-      }
-
-      const uploadResponse = await fetch(
-        `/api/resources/photo/${resource.id}`,
-        {
-          method: "POST",
-          body: data,
-        }
-      );
-
-      if (uploadResponse.status !== 200) {
-        setServerError(
-          "Failed uploading resource icon file. Changes did not save!"
-        );
-        throw new Error(JSON.stringify(uploadResponse));
-      }
-    }
-
     mutate(data);
   };