feat: heic support

components/invite/photo-preview.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { useState } from "react"
+
+export function PhotoPreview({ photo, alt }: { photo: { url: string; fallback?: string }; alt: string }) {
+  const [failed, setFailed] = useState(false)
+
+  // Signed storage URLs must bypass Next's image optimizer and remote-host allowlist.
+  // eslint-disable-next-line @next/next/no-img-element
+  return <div className="relative flex aspect-video items-center justify-center overflow-hidden border border-wedding-line bg-wedding-cream"><img src={photo.url} alt={alt} onError={() => setFailed(true)} className={`size-full object-contain ${failed ? "hidden" : ""}`} referrerPolicy="no-referrer" />{failed ? <p className="px-6 text-center font-wedding-ui text-sm text-wedding-ink">{photo.fallback ?? alt}</p> : null}</div>
+}

components/invite/photo-upload.tsx

@@ -1,155 +1,76 @@
 "use client"
 
-import { useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 
-import { allowedImageContentTypes, maxUploadSizeBytes } from "@/lib/validation/upload"
+import { PhotoPreview } from "@/components/invite/photo-preview"
+import { allowedImageContentTypes, allowedImageExtensions, getUploadContentType, maxUploadSizeBytes } from "@/lib/validation/upload"
 
 interface PhotoUploadLabels {
-  title: string
-  description: string
-  current: string
-  choose: string
-  upload: string
-  replace: string
-  uploading: string
-  success: string
-  error: string
-  disabled: string
-  requirements: string
+  title: string; description: string; current: string; choose: string; upload: string
+  replace: string; uploading: string; success: string; error: string; disabled: string
+  requirements: string; saved: string; selected: string; invalid: string; refresh: string
+  previewUnavailable: string
 }
+type Photo = { filename: string | null; url: string }
 
-export function PhotoUpload({
-  token,
-  labels,
-  disabled,
-  existingFilename,
-}: {
-  token: string
-  labels: PhotoUploadLabels
-  disabled: boolean
-  existingFilename: string | null
+export function PhotoUpload({ token, labels, disabled, existingPhoto }: {
+  token: string; labels: PhotoUploadLabels; disabled: boolean; existingPhoto: Photo | null
 }) {
   const inputRef = useRef<HTMLInputElement>(null)
-  const [filename, setFilename] = useState(existingFilename)
+  const [savedPhoto, setSavedPhoto] = useState(existingPhoto)
+  const [selected, setSelected] = useState<{ file: File; url: string } | null>(null)
   const [status, setStatus] = useState<"idle" | "uploading" | "success" | "error">("idle")
 
-  async function uploadSelectedFile() {
-    const file = inputRef.current?.files?.[0]
-    if (!file) return
+  useEffect(() => () => { if (selected) URL.revokeObjectURL(selected.url) }, [selected])
 
-    if (
-      !allowedImageContentTypes.includes(
-        file.type as (typeof allowedImageContentTypes)[number],
-      ) ||
-      file.size > maxUploadSizeBytes
-    ) {
+  function chooseFile(file: File | undefined) {
+    if (!file) return
+    if (!getUploadContentType(file) || file.size > maxUploadSizeBytes || file.size === 0) {
+      setSelected((previous) => {
+        if (previous) URL.revokeObjectURL(previous.url)
+        return null
+      })
       setStatus("error")
       return
     }
+    setStatus("idle")
+    setSelected((previous) => {
+      if (previous) URL.revokeObjectURL(previous.url)
+      return { file, url: URL.createObjectURL(file) }
+    })
+  }
 
+  async function uploadSelectedFile() {
+    if (!selected) return
     setStatus("uploading")
-
     try {
-      const presignResponse = await fetch("/api/uploads/presign", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          token,
-          filename: file.name,
-          contentType: file.type,
-          sizeBytes: file.size,
-        }),
-      })
-
-      if (!presignResponse.ok) throw new Error("Could not presign upload")
-
-      const { uploadUrl, objectKey } = (await presignResponse.json()) as {
-        uploadUrl: string
-        objectKey: string
-      }
-
-      const uploadResponse = await fetch(uploadUrl, {
-        method: "PUT",
-        headers: { "content-type": file.type },
-        body: file,
-      })
-
-      if (!uploadResponse.ok) throw new Error("Could not upload file")
-
-      const completeResponse = await fetch("/api/uploads/complete", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          token,
-          filename: file.name,
-          contentType: file.type,
-          sizeBytes: file.size,
-          objectKey,
-        }),
-      })
-
-      if (!completeResponse.ok) throw new Error("Could not complete upload")
-
-      setFilename(file.name)
-      setStatus("success")
+      const contentType = getUploadContentType(selected.file)
+      if (!contentType) throw new Error("invalid-file")
+      const input = { token, filename: selected.file.name, contentType, sizeBytes: selected.file.size }
+      const presign = await fetch("/api/uploads/presign", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(input) })
+      if (!presign.ok) throw new Error("presign")
+      const { uploadUrl, objectKey } = await presign.json() as { uploadUrl: string; objectKey: string }
+      const upload = await fetch(uploadUrl, { method: "PUT", headers: { "content-type": contentType }, body: selected.file })
+      if (!upload.ok) throw new Error("upload")
+      const complete = await fetch("/api/uploads/complete", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...input, objectKey }) })
+      if (!complete.ok) throw new Error("complete")
+      const result = await complete.json() as { photo: Photo }
+      setSavedPhoto(result.photo)
+      setSelected(null)
       if (inputRef.current) inputRef.current.value = ""
-    } catch {
-      setStatus("error")
-    }
+      setStatus("success")
+    } catch { setStatus("error") }
   }
 
   return (
     <section className="border-t border-wedding-line pt-10">
-      <div className="grid gap-4 max-w-3xl mx-auto">
-        <p className="wedding-section-label">04</p>
-        <div>
-          <h2 className="font-wedding-display text-wedding-medium">{labels.title}</h2>
-          <p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{labels.description}</p>
-        </div>
-        <p className="font-wedding-ui text-sm">{labels.requirements}</p>
-      </div>
-
-      <div className="mt-6 max-w-3xl mx-auto">
-        {filename ? (
-          <p className="bg-wedding-cream px-4 py-3 font-wedding-ui text-sm text-wedding-ink">
-            {labels.current.replace("{filename}", filename)}
-          </p>
-        ) : null}
-
-        {disabled ? (
-          <p className="border border-wedding-line bg-wedding-cream px-4 py-3 font-wedding-ui text-sm">
-            {labels.disabled}
-          </p>
-        ) : (
-          <div className="mt-4 flex flex-col gap-4 wedding-md:flex-row wedding-md:items-end">
-            <label className="flex-1 font-wedding-ui text-sm">
-              <span>{labels.choose}</span>
-              <input
-                ref={inputRef}
-                type="file"
-                accept={allowedImageContentTypes.join(",")}
-                className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3"
-              />
-            </label>
-            <button
-              type="button"
-              onClick={uploadSelectedFile}
-              disabled={status === "uploading"}
-              className="wedding-primary-cta disabled:cursor-not-allowed disabled:opacity-60"
-            >
-              {status === "uploading"
-                ? labels.uploading
-                : filename
-                  ? labels.replace
-                  : labels.upload}
-            </button>
-          </div>
-        )}
-
-        {status === "success" ? (
-          <p className="mt-4 font-wedding-ui text-sm text-wedding-olive">{labels.success}</p>
-        ) : null}
-        {status === "error" ? <p className="mt-4 font-wedding-ui text-sm text-wedding-terracotta">{labels.error}</p> : null}
+      <div className="mx-auto grid max-w-3xl gap-4"><p className="wedding-section-label">04</p><div><h2 className="font-wedding-display text-wedding-medium">{labels.title}</h2><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{labels.description}</p></div><p className="font-wedding-ui text-sm">{labels.requirements}</p></div>
+      <div className="mx-auto mt-6 max-w-3xl space-y-5">
+        {savedPhoto ? <div><p className="mb-2 font-wedding-ui text-sm">{labels.saved}</p><PhotoPreview photo={{ ...savedPhoto, fallback: labels.refresh }} alt={labels.current.replace("{filename}", savedPhoto.filename ?? "")} /></div> : null}
+        {selected ? <div><p className="mb-2 font-wedding-ui text-sm">{labels.selected}</p><PhotoPreview photo={{ url: selected.url, fallback: labels.previewUnavailable }} alt={labels.selected} /></div> : null}
+        {disabled ? <p className="border border-wedding-line bg-wedding-cream px-4 py-3 font-wedding-ui text-sm">{labels.disabled}</p> : <div className="flex flex-col gap-4 wedding-md:flex-row wedding-md:items-end"><label className="flex-1 font-wedding-ui text-sm"><span>{labels.choose}</span><input ref={inputRef} type="file" accept={[...allowedImageContentTypes, ...allowedImageExtensions].join(",")} disabled={status === "uploading"} onChange={(event) => chooseFile(event.target.files?.[0])} className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3 disabled:opacity-60" /></label><button type="button" onClick={uploadSelectedFile} disabled={!selected || status === "uploading"} className="wedding-primary-cta disabled:cursor-not-allowed disabled:opacity-60">{status === "uploading" ? labels.uploading : savedPhoto ? labels.replace : labels.upload}</button></div>}
+        {status === "success" ? <p aria-live="polite" className="font-wedding-ui text-sm text-wedding-olive">{labels.success}</p> : null}
+        {status === "error" ? <p aria-live="polite" className="font-wedding-ui text-sm text-wedding-terracotta">{selected ? labels.error : labels.invalid}</p> : null}
       </div>
     </section>
   )

components/invite/rsvp-form.tsx

@@ -14,7 +14,7 @@ export function RsvpForm({
   dictionary,
   closed,
   toastRequest,
-  filename,
+  photo,
 }: {
   action: (formData: FormData) => void | Promise<void>
   detail: InvitationDetail
@@ -22,14 +22,14 @@ export function RsvpForm({
   dictionary: GuestDictionary
   closed: boolean
   toastRequest: ToastRequest | undefined
-  filename: string | null
+  photo: { filename: string | null; url: string } | null
 }) {
   return (
     <form action={action} className="mt-12">
       <RsvpGuestFields members={detail.members} dictionary={dictionary} disabled={closed} />
       <RsvpTravelFields response={detail.response} dictionary={dictionary} disabled={closed} />
       <RsvpToastFields members={detail.members} toastRequest={toastRequest} dictionary={dictionary} disabled={closed} />
-      <div className="py-10"><PhotoUpload token={token} labels={dictionary.upload} disabled={closed} existingFilename={filename} /></div>
+      <div className="py-10"><PhotoUpload token={token} labels={dictionary.upload} disabled={closed} existingPhoto={photo} /></div>
       {!closed ? <div className="max-w-3xl mx-auto"><button type="submit" className="wedding-primary-cta w-full">{dictionary.form.submit} →</button></div> : null}
     </form>
   )

components/invite/rsvp-section.tsx

@@ -15,7 +15,7 @@ export function RsvpSection(props: {
   content: InvitePageContent["rsvp"]
   closed: boolean
   toastRequest: ToastRequest | undefined
-  filename: string | null
+  photo: { filename: string | null; url: string } | null
   submitted?: string
   error?: string
 }) {

components/invite/wedding-invite.tsx

@@ -18,7 +18,7 @@ export function WeddingInvite({
   content,
   closed,
   toastRequest,
-  filename,
+  photo,
   submitted,
   error,
 }: {
@@ -29,7 +29,7 @@ export function WeddingInvite({
   content: InvitePageContent
   closed: boolean
   toastRequest: ToastRequest | undefined
-  filename: string | null
+  photo: { filename: string | null; url: string } | null
   submitted?: string
   error?: string
 }) {
@@ -41,7 +41,7 @@ export function WeddingInvite({
       <DetailsSection content={content.details} />
       <ScheduleSection content={content.schedule} />
       <FaqSection content={content.faq} />
-      <RsvpSection action={action} detail={detail} token={token} dictionary={dictionary} content={content.rsvp} closed={closed} toastRequest={toastRequest} filename={filename} submitted={submitted} error={error} />
+      <RsvpSection action={action} detail={detail} token={token} dictionary={dictionary} content={content.rsvp} closed={closed} toastRequest={toastRequest} photo={photo} submitted={submitted} error={error} />
     </main>
   )
 }