feat: chunked uploads for large files + real progress bar

- 80MB chunks (under CF free plan 100MB limit)
- R2 multipart upload to reassemble
- Real progress tracking per chunk
- Supports files up to 1GB on free plan

Author: theJawnnybot

src/api.ts

@@ -1,4 +1,5 @@
 const WORKER_URL = import.meta.env.VITE_WORKER_URL || ''
+const CHUNK_SIZE = 80 * 1024 * 1024 // 80MB per chunk (under CF 100MB limit)
 
 interface UploadResult {
   id: string
@@ -9,30 +10,53 @@ export async function uploadVideo(
   file: File,
   onProgress: (progress: number) => void
 ): Promise<UploadResult> {
-  // Start with indeterminate progress since Cloudflare buffers uploads
-  onProgress(-1)
+  // Step 1: Initialize upload
+  const initRes = await fetch(`${WORKER_URL}/upload/init`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      filename: file.name,
+      contentType: file.type || 'video/mp4',
+      size: file.size,
+    }),
+  })
+
+  if (!initRes.ok) {
+    const err = await initRes.json().catch(() => ({ error: 'Upload init failed' }))
+    throw new Error((err as { error: string }).error || `Init failed (${initRes.status})`)
+  }
+
+  const { id, totalChunks } = await initRes.json() as { id: string; totalChunks: number }
+
+  // Step 2: Upload chunks
+  for (let i = 0; i < totalChunks; i++) {
+    const start = i * CHUNK_SIZE
+    const end = Math.min(start + CHUNK_SIZE, file.size)
+    const chunk = file.slice(start, end)
+
+    const res = await fetch(`${WORKER_URL}/upload/${id}/chunk/${i}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/octet-stream' },
+      body: chunk,
+    })
+
+    if (!res.ok) {
+      throw new Error(`Chunk ${i + 1}/${totalChunks} failed (${res.status})`)
+    }
+
+    onProgress(Math.round(((i + 1) / totalChunks) * 100))
+  }
 
-  const response = await fetch(`${WORKER_URL}/upload`, {
+  // Step 3: Finalize
+  const finalRes = await fetch(`${WORKER_URL}/upload/${id}/finalize`, {
     method: 'POST',
-    headers: {
-      'Content-Type': file.type || 'video/mp4',
-      'X-Filename': encodeURIComponent(file.name),
-    },
-    body: file,
   })
 
-  if (!response.ok) {
-    const text = await response.text()
-    let message = `Upload failed (${response.status})`
-    try {
-      const json = JSON.parse(text)
-      if (json.error) message = json.error
-    } catch { /* ignore */ }
-    throw new Error(message)
+  if (!finalRes.ok) {
+    throw new Error('Failed to finalize upload')
   }
 
-  onProgress(100)
-  return response.json()
+  return finalRes.json()
 }
 
 export async function deleteVideo(id: string): Promise<void> {

src/components/UploadProgress.css

@@ -35,22 +35,7 @@
   height: 100%;
   background: #4a9eff;
   border-radius: 3px;
-  transition: width 0.2s;
-}
-
-.progress-bar.indeterminate::after {
-  content: '';
-  display: block;
-  height: 100%;
-  width: 40%;
-  background: #4a9eff;
-  border-radius: 3px;
-  animation: indeterminate 1.5s ease-in-out infinite;
-}
-
-@keyframes indeterminate {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(350%); }
+  transition: width 0.3s ease;
 }
 
 .progress-text {

src/components/UploadProgress.tsx

@@ -6,20 +6,14 @@ interface UploadProgressProps {
 }
 
 export function UploadProgress({ filename, progress }: UploadProgressProps) {
-  const indeterminate = progress < 0
-
   return (
     <div className="upload-progress">
       <div className="upload-icon">☁️</div>
       <div className="upload-filename">{filename}</div>
-      <div className={`progress-bar ${indeterminate ? 'indeterminate' : ''}`}>
-        {!indeterminate && (
-          <div className="progress-fill" style={{ width: `${progress}%` }} />
-        )}
-      </div>
-      <div className="progress-text">
-        {indeterminate ? 'Uploading…' : `${progress}%`}
+      <div className="progress-bar">
+        <div className="progress-fill" style={{ width: `${progress}%` }} />
       </div>
+      <div className="progress-text">{progress}%</div>
     </div>
   )
 }