fix: harden image upload reliability

components/canvas/CanvasChatPanel.tsx

@@ -6191,6 +6191,7 @@ export function CanvasChatPanel({
       try {
         const formData = new FormData();
         formData.append("file", file);
+        formData.append("purpose", "canvas-upload");
 
         const response = await fetchUploadWithRetry(formData);
 
@@ -6263,6 +6264,7 @@ export function CanvasChatPanel({
       try {
         const formData = new FormData();
         formData.append("file", file);
+        formData.append("purpose", "canvas-upload");
 
         const response = await fetchUploadWithRetry(formData);
 
@@ -6435,6 +6437,7 @@ export function CanvasChatPanel({
       try {
         const formData = new FormData();
         formData.append("file", file);
+        formData.append("purpose", "canvas-upload");
 
         const response = await fetchUploadWithRetry(formData);
 
@@ -8801,6 +8804,7 @@ export function CanvasChatPanel({
     try {
       const formData = new FormData();
       formData.append('file', file);
+      formData.append('purpose', 'canvas-upload');
 
       const response = await fetchUploadWithRetry(formData);
 
@@ -9052,6 +9056,7 @@ export function CanvasChatPanel({
       try {
         const formData = new FormData();
         formData.append('file', file);
+        formData.append('purpose', 'canvas-upload');
         
         const response = await fetchUploadWithRetry(formData);
         

components/canvas/nodes/ImageNode.tsx

@@ -1087,6 +1087,7 @@ async function uploadChatAttachmentBlob(blob: Blob, displayName: string) {
   const formData = new FormData();
   const contentType = uploadBlob.type || "image/jpeg";
   formData.append("file", uploadBlob, normalizeChatAttachmentFileName(displayName, contentType));
+  formData.append("purpose", "canvas-upload");
 
   const response = await fetchUploadWithRetry(formData);
   let payload: any = null;
@@ -6370,6 +6371,7 @@ export function ImageNode({
         const blob = await response.blob();
         const formData = new FormData();
         formData.append("file", blob, `annotated-${Date.now()}.png`);
+        formData.append("purpose", "canvas-upload");
         const uploadResponse = await fetchUploadWithRetry(formData);
         if (uploadResponse.ok) {
           const result = await uploadResponse.json();
@@ -6406,6 +6408,7 @@ export function ImageNode({
     const blob = await response.blob();
     const formData = new FormData();
     formData.append("file", blob, `canvas-resize-${Date.now()}.png`);
+    formData.append("purpose", "canvas-upload");
 
     const uploadResponse = await fetchUploadWithRetry(formData);
 

components/canvas/nodes/TextNode.tsx

@@ -138,6 +138,7 @@ export function TextNode({
         const dimensions = await getPastedImageDimensions(file);
         const formData = new FormData();
         formData.append("file", file);
+        formData.append("purpose", "canvas-upload");
 
         try {
           const response = await fetchUploadWithRetry(formData);

components/flow-board/drawnix-workspace.tsx

@@ -604,6 +604,7 @@ function getFlowBoardImageDimensions(file: File) {
 async function uploadFlowBoardImageFile(file: File) {
   const formData = new FormData();
   formData.append("file", file);
+  formData.append("purpose", "canvas-upload");
 
   const response = await fetchUploadWithRetry(formData);
   if (!response.ok) {

lib/client/upload-with-retry.ts

@@ -1,8 +1,70 @@
 const DEFAULT_MAX_RETRIES = 3;
 const MAX_BACKOFF_MS = 8000;
+const MAX_CONCURRENT_UPLOADS = 3;
 
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+const RETRYABLE_UPLOAD_STATUSES = new Set([
+  408,
+  425,
+  429,
+  500,
+  502,
+  503,
+  504,
+]);
+
+let activeUploadCount = 0;
+const uploadQueue: Array<() => void> = [];
+
+function createAbortError() {
+  const error = new Error("Upload aborted");
+  error.name = "AbortError";
+  return error;
+}
+
+function sleep(ms: number, signal?: AbortSignal) {
+  if (signal?.aborted) {
+    return Promise.reject(createAbortError());
+  }
+
+  return new Promise<void>((resolve, reject) => {
+    const timeout = globalThis.setTimeout(() => {
+      signal?.removeEventListener("abort", onAbort);
+      resolve();
+    }, ms);
+
+    const onAbort = () => {
+      globalThis.clearTimeout(timeout);
+      reject(createAbortError());
+    };
+
+    signal?.addEventListener("abort", onAbort, { once: true });
+  });
+}
+
+function acquireUploadSlot() {
+  return new Promise<void>((resolve) => {
+    const start = () => {
+      activeUploadCount += 1;
+      resolve();
+    };
+
+    if (activeUploadCount < MAX_CONCURRENT_UPLOADS) {
+      start();
+    } else {
+      uploadQueue.push(start);
+    }
+  });
+}
+
+async function withUploadSlot<T>(task: () => Promise<T>): Promise<T> {
+  await acquireUploadSlot();
+
+  try {
+    return await task();
+  } finally {
+    activeUploadCount = Math.max(0, activeUploadCount - 1);
+    uploadQueue.shift()?.();
+  }
 }
 
 function parseRetryAfterMs(value: string | null): number | null {
@@ -23,6 +85,41 @@ function computeBackoffMs(attempt: number, retryAfterMs: number | null) {
   return exp + jitter;
 }
 
+function isRetryableUploadStatus(status: number) {
+  return RETRYABLE_UPLOAD_STATUSES.has(status);
+}
+
+function isAbortError(error: unknown, signal?: AbortSignal) {
+  return (
+    signal?.aborted ||
+    (error instanceof Error && error.name === "AbortError")
+  );
+}
+
+function cloneFormData(formData: FormData) {
+  const copy = new FormData();
+
+  formData.forEach((value, key) => {
+    if (typeof value === "string") {
+      copy.append(key, value);
+      return;
+    }
+
+    const filename =
+      typeof File !== "undefined" && value instanceof File
+        ? value.name
+        : undefined;
+
+    if (filename) {
+      copy.append(key, value, filename);
+    } else {
+      copy.append(key, value);
+    }
+  });
+
+  return copy;
+}
+
 export async function fetchUploadWithRetry(
   formData: FormData,
   options?: {
@@ -32,14 +129,16 @@ export async function fetchUploadWithRetry(
 ) {
   const maxRetries = options?.maxRetries ?? DEFAULT_MAX_RETRIES;
 
+  return withUploadSlot(async () => {
     for (let attempt = 0; ; attempt++) {
+      try {
         const response = await fetch("/api/files/upload", {
           method: "POST",
-      body: formData,
+          body: cloneFormData(formData),
           signal: options?.signal,
         });
 
-    if (response.status !== 429 || attempt >= maxRetries) {
+        if (!isRetryableUploadStatus(response.status) || attempt >= maxRetries) {
           return response;
         }
 
@@ -55,6 +154,15 @@ export async function fetchUploadWithRetry(
         }
 
         const delayMs = computeBackoffMs(attempt, retryAfterMs);
-    await sleep(delayMs);
+        await sleep(delayMs, options?.signal);
+      } catch (error) {
+        if (isAbortError(error, options?.signal) || attempt >= maxRetries) {
+          throw error;
         }
+
+        const delayMs = computeBackoffMs(attempt, null);
+        await sleep(delayMs, options?.signal);
+      }
+    }
+  });
 }