[{"_1":2,"_194":-5,"_195":-5},"loaderData",{"_3":4,"_98":99},"root",{"_5":6,"_39":40,"_71":72},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20,"_36":-5,"_37":20,"_38":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","ENV",{"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","6001c7decb8dfd083f3b0ffa5d457c864fb16b4a","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","API_URL","https://api.val.town","clerkState",{"_73":74},"__internal_clerk_state",{"_75":76,"_77":50,"_78":79,"_80":79,"_81":20,"_82":79,"_83":79,"_84":79,"_85":79,"_86":87,"_96":20,"_97":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_88":20,"_19":20,"_89":79,"_90":91,"_92":79,"_93":50,"_94":20,"_95":79},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_100":101,"_102":103,"_104":105,"_106":107,"_170":171,"_191":192,"_193":-5},"handle","stevekrouse","name","beyond-text-3","path","frontend/hooks/useImageUpload.ts","project",{"_108":109,"_102":103,"_110":111,"_112":-5,"_113":20,"_114":115,"_116":117,"_118":-5,"_12":119,"_120":121,"_122":123,"_124":-5,"_125":-5,"_126":33,"_14":127,"_128":129,"_130":131,"_132":133,"_134":-5,"_135":136,"_137":136,"_138":139,"_140":139,"_141":139,"_142":136,"_143":136,"_23":144,"_147":148,"_152":153,"_169":20},"id","de221b10-39ca-11f1-82c2-42b51c65c3df","createdAt",["D",1776367889779],"deletedAt","legacyEnvVars","privacy","public","description","Starter template with client-side React & Hono server","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019d97c6-edc7-722c-8966-3d4dbbbae3b1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","de221b1039ca11f182c242b51c65c3df","tursoHostname","de221b1039ca11f182c242b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1776368462406],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_100":101,"_145":146},"profileImageUrl","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","org",{"_100":101,"_149":146,"_12":119,"_150":151},"avatar","tier","pro","branch",{"_154":155,"_102":48,"_108":156,"_157":109,"_158":159,"_160":161,"_162":115,"_163":164,"_165":166,"_167":103,"_168":101},"version",21,"de2690be-39ca-11f1-82c2-42b51c65c3df","projectId","forkedBranchId","2bb48138-3994-11f1-a3d1-42b51c65c3df","forkedBranchVersion",3,"forkedProjectPrivacy","forkedProjectId","2baeca9a-3994-11f1-a3d1-42b51c65c3df","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","isOwned","file",{"_108":172,"_102":173,"_174":175,"_176":177,"_178":156,"_179":155,"_180":123,"_110":181,"_154":33,"_182":183,"_184":185,"_186":20,"_187":-5,"_104":188},"705123ee-39cd-11f1-989c-42b51c65c3df","useImageUpload.ts","fileId","7051247a-39cd-11f1-989c-42b51c65c3df","parentId","61fe1c9c-d380-4572-8835-fcfc6e90a2f7","branchId","branchVersion","latest",["D",1776368994041],"fileType","script","content","// Hook that manages camera capture → compress → upload flow.\n//\n// Self-contained: doesn't know about messages or the chat UI. Just exposes a\n// `pickAndUpload` function that opens the device camera and uploads the result.\n// The backend also inserts a chat message for the image, so the SSE stream the\n// main-branch agent built will deliver the new message to every client.\n\nimport { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n// Import from frontend-local config (see lib/image-config.ts for why).\nimport type { ChatImage } from \"../lib/image-config.ts\";\nimport {\n IMAGE_ALLOWED_MIME_TYPES,\n IMAGE_UPLOAD_MAX_BYTES,\n} from \"../lib/image-config.ts\";\n\nexport type UploadStatus = \"idle\" | \"compressing\" | \"uploading\" | \"error\";\n\ninterface UseImageUploadResult {\n /** True while compressing or uploading. */\n busy: boolean;\n /** Most recent error message (cleared when a new upload starts). */\n error: string | null;\n /** Status of the current / most recent upload. */\n status: UploadStatus;\n /** Hidden ref — render and attach with the helper below. */\n inputRef: { current: HTMLInputElement | null };\n /** Props to spread onto a hidden . */\n inputProps: {\n type: \"file\";\n accept: string;\n capture: \"user\";\n onChange: (e: Event) => void;\n style: Record;\n };\n /** Programmatically open the camera (call from a button's onClick). */\n openCamera: () => void;\n}\n\n// Compress in the browser before upload: shrinks big iPhone photos (5-10 MB)\n// down to a reasonable size, which also avoids hitting IMAGE_UPLOAD_MAX_BYTES.\nconst MAX_DIMENSION = 1600;\nconst JPEG_QUALITY = 0.82;\n\nasync function compressImage(file: File): Promise {\n // If already tiny and JPEG-ish, don't bother re-encoding.\n if (file.size < 500_000 && /jpeg|jpg|webp|png/i.test(file.type)) {\n return file;\n }\n\n const bitmap = await createBitmap(file);\n const { width, height } = fitWithin(bitmap.width, bitmap.height, MAX_DIMENSION);\n\n const canvas = document.createElement(\"canvas\");\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Canvas 2D context unavailable\");\n ctx.drawImage(bitmap, 0, 0, width, height);\n\n // Release bitmap early on supported browsers.\n if (\"close\" in bitmap && typeof (bitmap as any).close === \"function\") {\n (bitmap as any).close();\n }\n\n const blob: Blob = await new Promise((resolve, reject) => {\n canvas.toBlob(\n (b) => (b ? resolve(b) : reject(new Error(\"toBlob returned null\"))),\n \"image/jpeg\",\n JPEG_QUALITY,\n );\n });\n\n return new File([blob], \"selfie.jpg\", { type: \"image/jpeg\" });\n}\n\nasync function createBitmap(file: File): Promise {\n // createImageBitmap handles EXIF orientation on most modern browsers.\n if (typeof createImageBitmap === \"function\") {\n try {\n return await createImageBitmap(file, { imageOrientation: \"from-image\" } as any);\n } catch {\n // Fall through to -based path.\n }\n }\n // Fallback: load via .\n const url = URL.createObjectURL(file);\n try {\n const img = new Image();\n img.decoding = \"async\";\n await new Promise((resolve, reject) => {\n img.onload = () => resolve();\n img.onerror = () => reject(new Error(\"Image decode failed\"));\n img.src = url;\n });\n return img;\n } finally {\n // Revoke after a tick so the drawImage call can still use it.\n setTimeout(() => URL.revokeObjectURL(url), 0);\n }\n}\n\nfunction fitWithin(w: number, h: number, max: number) {\n if (w <= max && h <= max) return { width: w, height: h };\n if (w >= h) {\n return { width: max, height: Math.round((h / w) * max) };\n }\n return { width: Math.round((w / h) * max), height: max };\n}\n\nexport function useImageUpload(\n onUploaded?: (image: ChatImage) => void,\n): UseImageUploadResult {\n const [status, setStatus] = useState(\"idle\");\n const [error, setError] = useState(null);\n const inputRef = useRef(null);\n\n const handleChange = useCallback(async (e: Event) => {\n const input = e.target as HTMLInputElement;\n const file = input.files?.[0];\n // Reset the input so the same file can be picked again.\n input.value = \"\";\n if (!file) return;\n\n setError(null);\n\n try {\n setStatus(\"compressing\");\n const compressed = await compressImage(file);\n if (compressed.size > IMAGE_UPLOAD_MAX_BYTES) {\n throw new Error(\"Image is too large after compression. Try again.\");\n }\n\n setStatus(\"uploading\");\n const fd = new FormData();\n fd.append(\"image\", compressed, compressed.name || \"selfie.jpg\");\n\n const res = await fetch(\"/api/images\", {\n method: \"POST\",\n body: fd,\n });\n if (!res.ok) {\n const body = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));\n throw new Error(body.error ?? `Upload failed (${res.status})`);\n }\n const data = (await res.json()) as { image: ChatImage };\n setStatus(\"idle\");\n onUploaded?.(data.image);\n } catch (err: any) {\n console.error(\"Image upload failed:\", err);\n setError(err?.message ?? \"Upload failed\");\n setStatus(\"error\");\n }\n }, [onUploaded]);\n\n const openCamera = useCallback(() => {\n inputRef.current?.click();\n }, []);\n\n const inputProps: UseImageUploadResult[\"inputProps\"] = {\n type: \"file\",\n // Accept all common camera-capture types. Server validates & normalizes.\n accept: IMAGE_ALLOWED_MIME_TYPES.join(\",\") + \",image/*\",\n // On iOS/Android this hints to open the front-facing camera directly.\n capture: \"user\",\n onChange: handleChange,\n style: {\n position: \"absolute\",\n width: \"1px\",\n height: \"1px\",\n padding: \"0\",\n margin: \"-1px\",\n overflow: \"hidden\",\n clip: \"rect(0,0,0,0)\",\n whiteSpace: \"nowrap\",\n border: \"0\",\n },\n };\n\n const busy = status === \"compressing\" || status === \"uploading\";\n\n return { busy, error, status, inputRef, inputProps, openCamera };\n}\n","deleted","label",[189,190,173],"frontend","hooks","permalink","https://www.val.town/x/stevekrouse/beyond-text-3/code/frontend/hooks/useImageUpload.ts","extension","actionData","errors"]