manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(memories): route upload through server proxy to avoid R2 CORS failure

Browse source 
Direct PUT to R2 presigned URL is cross-origin, causing "Failed to fetch"
in browsers without R2 CORS configured. Use the existing PUT /api/upload
proxy handler instead — file goes client → Next.js → R2 server-side.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-18 21:57:48 +05:30
parent 96d28cbadc
commit 0e047e110f
1 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/app/memories/page.tsx
View file

@ -84,17 +84,26 @@ export default function MemoriesPage() {
setUploading(true); setUploading(true);
try { try {
// Step 1: Get presigned URL + memoryId // Step 1: Get key + memoryId from server
const initRes = await fetch("/api/upload", { const initRes = await fetch("/api/upload", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ filename: file.name, contentType: file.type, childId, sizeBytes: file.size }), body: JSON.stringify({ filename: file.name, contentType: file.type, childId, sizeBytes: file.size }),
}); });
const { uploadUrl, memoryId, publicUrl, error } = await initRes.json(); const { key, memoryId, publicUrl, error } = await initRes.json();
if (error) { alert("Error: " + error); return; } if (error) { alert("Error: " + error); return; }
// Step 2: Upload directly to R2 // Step 2: Upload via server proxy — avoids cross-origin CORS restriction on R2
await fetch(uploadUrl, { method: "PUT", body: file, headers: { "Content-Type": file.type } }); const putParams = new URLSearchParams({ key, contentType: file.type });
const putRes = await fetch(`/api/upload?${putParams}`, {
method: "PUT",
body: file,
headers: { "Content-Type": file.type },
});
if (!putRes.ok) {
const e = await putRes.json().catch(() => ({})) as { error?: string };
throw new Error(e.error ?? `Upload failed (${putRes.status})`);
}
// Step 3: Confirm upload → fires thumbnail + vision pipeline // Step 3: Confirm upload → fires thumbnail + vision pipeline
await fetch(`/api/memories/${memoryId}/confirm`, { method: "POST" }); await fetch(`/api/memories/${memoryId}/confirm`, { method: "POST" });
@ -102,7 +111,7 @@ export default function MemoriesPage() {
// Optimistic add // Optimistic add
const optimistic: Memory = { const optimistic: Memory = {
id: memoryId, id: memoryId,
key: "", key,
url: publicUrl, url: publicUrl,
thumbnailUrl: null, thumbnailUrl: null,
sizeBytes: file.size, sizeBytes: file.size,