78 lines
5.0 KiB
TypeScript
78 lines
5.0 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useRef, useState } from "react"
|
|
|
|
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; saved: string; selected: string; invalid: string; refresh: string
|
|
previewUnavailable: string
|
|
}
|
|
type Photo = { filename: string | null; url: string }
|
|
|
|
export function PhotoUpload({ token, labels, disabled, existingPhoto }: {
|
|
token: string; labels: PhotoUploadLabels; disabled: boolean; existingPhoto: Photo | null
|
|
}) {
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const [savedPhoto, setSavedPhoto] = useState(existingPhoto)
|
|
const [selected, setSelected] = useState<{ file: File; url: string } | null>(null)
|
|
const [status, setStatus] = useState<"idle" | "uploading" | "success" | "error">("idle")
|
|
|
|
useEffect(() => () => { if (selected) URL.revokeObjectURL(selected.url) }, [selected])
|
|
|
|
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 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 = ""
|
|
setStatus("success")
|
|
} catch { setStatus("error") }
|
|
}
|
|
|
|
return (
|
|
<section className="border-t border-wedding-line pt-10">
|
|
<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>
|
|
)
|
|
}
|