Always supply the width and the height of attachments

src/components/Chat.tsx

@@ -10,7 +10,7 @@ import {
   DiscordEmoji,
 } from "../lib/discordEmoji";
 import { trimmedPost } from "../lib/reply";
-import { uploadFile } from "../lib/upload";
+import { uploadFile, getImageSize } from "../lib/upload";
 import { useShallow } from "zustand/react/shallow";
 import { Button } from "./Button";
 import { Textarea } from "./Input";
@@ -207,13 +207,16 @@ export const EnterPostBase = (props: EnterPostBaseProps) => {
         errors.push(uploadedFile.message);
         break;
       }
+      const imageSize = await getImageSize(uploadedFile.response);
       setAttachments((attachments) => [
         ...attachments,
         {
           filename: file.name,
           id: uploadedFile.response.id,
           mime: file.type,
           size: file.size,
+          width: imageSize.width,
+          height: imageSize.height,
         } satisfies Attachment,
       ]);
     }

src/lib/api/posts.ts

@@ -3,10 +3,7 @@ import { Slice } from ".";
 import { getCloudlink } from "./cloudlink";
 import { Errorable, loadMore, request } from "./utils";
 
-export type Attachment = Omit<
-  z.infer<typeof ATTACHMENT_SCHEMA>,
-  "height" | "width"
-> & { width?: number; height?: number };
+export type Attachment = z.infer<typeof ATTACHMENT_SCHEMA>;
 const ATTACHMENT_SCHEMA = z.object({
   filename: z.string(),
   height: z.number(),

src/lib/upload.ts

@@ -47,6 +47,21 @@ 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(),