ligun and sogup

src/components/NewPostWidget.tsx

@@ -5,7 +5,7 @@ import SecondaryButton from './SecondaryButton.tsx'
 import { openFileDialog } from '../utils/openFileDialog.ts'
 
 interface NewPostWidgetProps {
-  onSubmit: (content: string, media: File[]) => void
+  onSubmit: (content: string, media: { file: File; width: number; height: number }[]) => void
   isSubmitting?: boolean
 }
 
@@ -13,6 +13,8 @@ interface Attachment {
   id: string
   file: File
   objectUrl: string
+  width: number
+  height: number
 }
 
 export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPostWidgetProps) {
@@ -29,13 +31,8 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
       return
     }
 
-    const newFiles = Array.from(files).map((file) => ({
-      id: crypto.randomUUID(),
-      file,
-      objectUrl: URL.createObjectURL(file),
-    }))
-
-    setAttachments((attachments) => [...attachments, ...newFiles])
+    const newAttachments = await Promise.all(Array.from(files).map(createAttachment))
+    setAttachments((attachments) => [...attachments, ...newAttachments])
   }
 
   const handleSubmit = () => {
@@ -43,10 +40,7 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
       return
     }
 
-    onSubmit(
-      content,
-      attachments.map(({ file }) => file),
-    )
+    onSubmit(content, attachments)
 
     attachments.forEach(({ objectUrl }) => URL.revokeObjectURL(objectUrl))
     setContent('')
@@ -91,7 +85,7 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
         </div>
       )}
 
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center pt-2">
         <SecondaryButton onClick={onAddMediaClicked}>+ add media</SecondaryButton>
         <PrimaryButton
           onClick={handleSubmit}
@@ -103,3 +97,33 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
     </div>
   )
 }
+
+async function createAttachment(file: File): Promise<Attachment> {
+  if (!file.type.startsWith('image/')) {
+    throw new Error('not an image')
+  }
+
+  const objectUrl = URL.createObjectURL(file)
+  const { width, height } = await getImageFileDimensions(objectUrl)
+
+  console.debug('width', width, 'height', height)
+  return {
+    id: crypto.randomUUID(),
+    file,
+    objectUrl,
+    width,
+    height,
+  }
+}
+
+function getImageFileDimensions(objectURL: string): Promise<{ width: number; height: number }> {
+  return new Promise((resolve) => {
+    const img = document.createElement('img')
+
+    img.addEventListener('load', () => {
+      resolve({ width: img.width, height: img.height })
+    })
+
+    img.src = objectURL
+  })
+}