Use already loaded file instead of fetching it for size

src/components/Chat.tsx

@@ -9,8 +9,9 @@ import {
   urlFromDiscordEmoji,
   DiscordEmoji,
 } from "../lib/discordEmoji";
+import { getImageSize } from "../lib/imageSize";
 import { trimmedPost } from "../lib/reply";
-import { uploadFile, getImageSize } from "../lib/upload";
+import { uploadFile } from "../lib/upload";
 import { useShallow } from "zustand/react/shallow";
 import { Button } from "./Button";
 import { Textarea } from "./Input";
@@ -207,7 +208,7 @@ export const EnterPostBase = (props: EnterPostBaseProps) => {
         errors.push(uploadedFile.message);
         break;
       }
-      const imageSize = await getImageSize(uploadedFile.response);
+      const imageSize = await getImageSize(URL.createObjectURL(file));
       setAttachments((attachments) => [
         ...attachments,
         {

src/lib/imageSize.ts

@@ -0,0 +1,17 @@
+export const getImageSize = (file: string) => {
+  return new Promise<ImageSize>((resolve) => {
+    const image = new Image();
+    image.addEventListener("load", () => {
+      resolve({ width: image.width, height: image.height });
+    });
+    image.addEventListener("error", () => {
+      resolve({ width: 0, height: 0 });
+    });
+    image.src = file;
+  });
+};
+
+export type ImageSize = {
+  width: number;
+  height: number;
+};

src/lib/upload.ts

@@ -47,21 +47,6 @@ export const uploadFile = async (
   return { error: false, response: response };
 };
 
-export const getImageSize = (file: UploadedFile) => {
-  return new Promise<ImageSize>((resolve) => {
-    const image = new Image();
-    image.addEventListener("load", () => {
-      resolve({ width: image.width, height: image.height });
-    });
-    image.src = `https://uploads.meower.org/attachments/${file.id}/${file.filename}`;
-  });
-};
-
-export type ImageSize = {
-  width: number;
-  height: number;
-};
-
 const IMAGE_SCHEMA = z.object({
   bucket: z.string(),
   claimed: z.boolean(),