Chunked upload for large files to bypass Cloudflare 100MB limit

davindicode · claude · davindicode · commit aad90dbf152d · 2026-03-29T15:46:54.000+02:00
Files under 80MB upload directly (single request).
Files over 80MB are split into 80MB chunks, uploaded individually,
then assembled on the server via a finalize endpoint. This bypasses
Cloudflare's per-request body size limit for free Quick Tunnels.

- /api/files/upload-chunk: receives individual chunks to temp dir
- /api/files/upload-finalize: assembles chunks into destination file,
  cleans up temp chunks
- Client tracks overall progress across chunks
- Cancel works per-file, aborting active chunk and skipping remaining

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/app/components/files/FilesPage.tsx b/app/components/files/FilesPage.tsx
@@ -245,53 +245,119 @@ function FileSessionView({ session }: { session: FileSession }) {
     setUploadQueue((q) => q.map((f, i) => i === index && f.status !== "done" ? { ...f, status: "cancelled", progress: 0 } : f));
   };
 
-  const uploadFile = (file: File, index: number): Promise<void> => {
-    if (cancelledIndices.current.has(index)) return Promise.resolve();
+  const CHUNK_SIZE = 80 * 1024 * 1024; // 80MB — under Cloudflare's 100MB limit
 
+  const uploadChunk = (blob: Blob, uploadId: string, chunkIndex: number, index: number): Promise<boolean> => {
     return new Promise((resolve) => {
       const formData = new FormData();
-      formData.append("file", file);
-      formData.append("dir", cwd);
+      formData.append("uploadId", uploadId);
+      formData.append("chunkIndex", String(chunkIndex));
+      formData.append("chunk", blob);
 
       const xhr = new XMLHttpRequest();
       uploadXhrs.current.set(index, xhr);
 
-      xhr.upload.onprogress = (e) => {
-        if (e.lengthComputable) {
-          const pct = Math.round((e.loaded / e.total) * 100);
-          setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, progress: pct } : f));
-        }
-      };
       xhr.onload = () => {
         uploadXhrs.current.delete(index);
         try {
           const data = JSON.parse(xhr.responseText);
-          if (data.error) {
-            setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: data.error } : f));
-          } else {
-            setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "done", progress: 100 } : f));
-          }
-        } catch {
-          setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "done", progress: 100 } : f));
-        }
-        resolve();
-      };
-      xhr.onerror = () => {
-        uploadXhrs.current.delete(index);
-        setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: "Network error" } : f));
-        resolve();
-      };
-      xhr.onabort = () => {
-        uploadXhrs.current.delete(index);
-        resolve();
+          resolve(!data.error);
+        } catch { resolve(false); }
       };
+      xhr.onerror = () => { uploadXhrs.current.delete(index); resolve(false); };
+      xhr.onabort = () => { uploadXhrs.current.delete(index); resolve(false); };
 
-      setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "uploading" } : f));
-      xhr.open("POST", "/api/files/upload");
+      xhr.open("POST", "/api/files/upload-chunk");
       xhr.send(formData);
     });
   };
 
+  const uploadFile = async (file: File, index: number): Promise<void> => {
+    if (cancelledIndices.current.has(index)) return;
+    setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "uploading" } : f));
+
+    // Small files: direct upload
+    if (file.size <= CHUNK_SIZE) {
+      return new Promise((resolve) => {
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("dir", cwd);
+
+        const xhr = new XMLHttpRequest();
+        uploadXhrs.current.set(index, xhr);
+
+        xhr.upload.onprogress = (e) => {
+          if (e.lengthComputable) {
+            const pct = Math.round((e.loaded / e.total) * 100);
+            setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, progress: pct } : f));
+          }
+        };
+        xhr.onload = () => {
+          uploadXhrs.current.delete(index);
+          try {
+            const data = JSON.parse(xhr.responseText);
+            if (data.error) {
+              setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: data.error } : f));
+            } else {
+              setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "done", progress: 100 } : f));
+            }
+          } catch {
+            setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "done", progress: 100 } : f));
+          }
+          resolve();
+        };
+        xhr.onerror = () => {
+          uploadXhrs.current.delete(index);
+          setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: "Network error" } : f));
+          resolve();
+        };
+        xhr.onabort = () => { uploadXhrs.current.delete(index); resolve(); };
+
+        xhr.open("POST", "/api/files/upload");
+        xhr.send(formData);
+      });
+    }
+
+    // Large files: chunked upload
+    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+    const uploadId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+    for (let c = 0; c < totalChunks; c++) {
+      if (cancelledIndices.current.has(index)) {
+        setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "cancelled", progress: 0 } : f));
+        return;
+      }
+      const start = c * CHUNK_SIZE;
+      const end = Math.min(start + CHUNK_SIZE, file.size);
+      const blob = file.slice(start, end);
+
+      const ok = await uploadChunk(blob, uploadId, c, index);
+      if (!ok) {
+        setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: `Chunk ${c + 1}/${totalChunks} failed` } : f));
+        return;
+      }
+      const pct = Math.round(((c + 1) / totalChunks) * 100);
+      setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, progress: pct } : f));
+    }
+
+    // Finalize: assemble chunks on server
+    try {
+      const res = await fetch("/api/files/upload-finalize", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ uploadId, dir: cwd, fileName: file.name, totalChunks }),
+      });
+      const data = await res.json();
+      if (data.error) {
+        setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: data.error } : f));
+      } else {
+        setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "done", progress: 100 } : f));
+      }
+    } catch (err: any) {
+      setUploadQueue((q) => q.map((f, i) => i === index ? { ...f, status: "error", error: err.message } : f));
+    }
+  };
+
   const handleUpload = async (files: FileList | null) => {
     if (!files || files.length === 0) return;
     cancelledIndices.current.clear();
diff --git a/server/dev.ts b/server/dev.ts
@@ -1,8 +1,9 @@
 import "dotenv/config";
 import express from "express";
 import { createServer } from "http";
-import { createWriteStream } from "fs";
+import { createWriteStream, createReadStream, unlinkSync, mkdirSync, existsSync, readdirSync } from "fs";
 import { join } from "path";
+import { tmpdir } from "os";
 import Busboy from "busboy";
 import { Server as SocketIOServer } from "socket.io";
 import { registerSocketHandlers } from "./socket-handlers.js";
@@ -78,6 +79,97 @@ async function main() {
     req.pipe(busboy);
   });
 
+  // Chunked upload: receive individual chunks
+  const chunksDir = join(tmpdir(), "otgcode-chunks");
+  if (!existsSync(chunksDir)) mkdirSync(chunksDir, { recursive: true });
+
+  app.post("/api/files/upload-chunk", (req, res) => {
+    req.setTimeout(0);
+    let uploadId = "";
+    let chunkIndex = "";
+
+    const busboy = Busboy({ headers: req.headers });
+
+    busboy.on("field", (name: string, val: string) => {
+      if (name === "uploadId") uploadId = val;
+      if (name === "chunkIndex") chunkIndex = val;
+    });
+
+    busboy.on("file", (_name: string, stream: NodeJS.ReadableStream) => {
+      if (!uploadId || chunkIndex === "") {
+        stream.resume();
+        return;
+      }
+      const uploadDir = join(chunksDir, uploadId);
+      if (!existsSync(uploadDir)) mkdirSync(uploadDir, { recursive: true });
+      const chunkFile = join(uploadDir, `chunk_${chunkIndex.padStart(6, "0")}`);
+      const ws = createWriteStream(chunkFile);
+      stream.pipe(ws);
+
+      ws.on("error", (err: Error) => {
+        if (!res.headersSent) res.status(500).json({ error: err.message });
+      });
+      ws.on("finish", () => {
+        if (!res.headersSent) res.json({ success: true, chunk: parseInt(chunkIndex, 10) });
+      });
+    });
+
+    busboy.on("error", (err: Error) => {
+      if (!res.headersSent) res.status(500).json({ error: err.message });
+    });
+
+    req.pipe(busboy);
+  });
+
+  app.post("/api/files/upload-finalize", express.json(), (req, res) => {
+    const { uploadId, dir, fileName, totalChunks } = req.body as {
+      uploadId: string; dir: string; fileName: string; totalChunks: number;
+    };
+
+    if (!uploadId || !dir || !fileName || !totalChunks) {
+      res.status(400).json({ error: "Missing required fields" });
+      return;
+    }
+
+    const uploadDir = join(chunksDir, uploadId);
+    const dest = join(dir, fileName);
+
+    try {
+      const ws = createWriteStream(dest);
+      let i = 0;
+
+      const writeNext = () => {
+        if (i >= totalChunks) {
+          ws.end(() => {
+            try {
+              const files = readdirSync(uploadDir);
+              for (const f of files) unlinkSync(join(uploadDir, f));
+              require("fs").rmdirSync(uploadDir);
+            } catch {}
+            res.json({ success: true, path: dest });
+          });
+          return;
+        }
+        const chunkPath = join(uploadDir, `chunk_${String(i).padStart(6, "0")}`);
+        const rs = createReadStream(chunkPath);
+        rs.on("error", (err: Error) => {
+          ws.destroy();
+          if (!res.headersSent) res.status(500).json({ error: `Chunk ${i} missing: ${err.message}` });
+        });
+        rs.pipe(ws, { end: false });
+        rs.on("end", () => { i++; writeNext(); });
+      };
+
+      ws.on("error", (err: Error) => {
+        if (!res.headersSent) res.status(500).json({ error: err.message });
+      });
+
+      writeNext();
+    } catch (err: any) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+
   // Reverse proxy
   mountProxy(app, httpServer, PORT);
 
diff --git a/server/index.ts b/server/index.ts
@@ -1,8 +1,9 @@
 import "dotenv/config";
 import express from "express";
 import { createServer } from "http";
-import { createWriteStream } from "fs";
+import { createWriteStream, createReadStream, unlinkSync, mkdirSync, existsSync, readdirSync } from "fs";
 import { join } from "path";
+import { tmpdir } from "os";
 import Busboy from "busboy";
 import { Server as SocketIOServer } from "socket.io";
 import { registerSocketHandlers } from "./socket-handlers.js";
@@ -82,6 +83,100 @@ async function main() {
     req.pipe(busboy);
   });
 
+  // Chunked upload: receive individual chunks
+  const chunksDir = join(tmpdir(), "otgcode-chunks");
+  if (!existsSync(chunksDir)) mkdirSync(chunksDir, { recursive: true });
+
+  app.post("/api/files/upload-chunk", (req, res) => {
+    req.setTimeout(0);
+    let uploadId = "";
+    let chunkIndex = "";
+    let chunkFile = "";
+
+    const busboy = Busboy({ headers: req.headers });
+
+    busboy.on("field", (name: string, val: string) => {
+      if (name === "uploadId") uploadId = val;
+      if (name === "chunkIndex") chunkIndex = val;
+    });
+
+    busboy.on("file", (_name: string, stream: NodeJS.ReadableStream) => {
+      if (!uploadId || chunkIndex === "") {
+        stream.resume();
+        return;
+      }
+      const uploadDir = join(chunksDir, uploadId);
+      if (!existsSync(uploadDir)) mkdirSync(uploadDir, { recursive: true });
+      chunkFile = join(uploadDir, `chunk_${chunkIndex.padStart(6, "0")}`);
+      const ws = createWriteStream(chunkFile);
+      stream.pipe(ws);
+
+      ws.on("error", (err: Error) => {
+        if (!res.headersSent) res.status(500).json({ error: err.message });
+      });
+      ws.on("finish", () => {
+        if (!res.headersSent) res.json({ success: true, chunk: parseInt(chunkIndex, 10) });
+      });
+    });
+
+    busboy.on("error", (err: Error) => {
+      if (!res.headersSent) res.status(500).json({ error: err.message });
+    });
+
+    req.pipe(busboy);
+  });
+
+  // Chunked upload: finalize — assemble chunks into destination file
+  app.post("/api/files/upload-finalize", express.json(), (req, res) => {
+    const { uploadId, dir, fileName, totalChunks } = req.body as {
+      uploadId: string; dir: string; fileName: string; totalChunks: number;
+    };
+
+    if (!uploadId || !dir || !fileName || !totalChunks) {
+      res.status(400).json({ error: "Missing required fields" });
+      return;
+    }
+
+    const uploadDir = join(chunksDir, uploadId);
+    const dest = join(dir, fileName);
+
+    try {
+      const ws = createWriteStream(dest);
+      let i = 0;
+
+      const writeNext = () => {
+        if (i >= totalChunks) {
+          ws.end(() => {
+            // Clean up chunks
+            try {
+              const files = readdirSync(uploadDir);
+              for (const f of files) unlinkSync(join(uploadDir, f));
+              require("fs").rmdirSync(uploadDir);
+            } catch {}
+            res.json({ success: true, path: dest });
+          });
+          return;
+        }
+        const chunkPath = join(uploadDir, `chunk_${String(i).padStart(6, "0")}`);
+        const rs = createReadStream(chunkPath);
+        rs.on("error", (err: Error) => {
+          ws.destroy();
+          if (!res.headersSent) res.status(500).json({ error: `Chunk ${i} missing: ${err.message}` });
+        });
+        rs.pipe(ws, { end: false });
+        rs.on("end", () => { i++; writeNext(); });
+      };
+
+      ws.on("error", (err: Error) => {
+        if (!res.headersSent) res.status(500).json({ error: err.message });
+      });
+
+      writeNext();
+    } catch (err: any) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+
   // Reverse proxy (before RR handler so it gets priority)
   mountProxy(app, httpServer, PORT);
 
