Design a File Uploader

3 collapsed lines
1
interface UploadOptions {
2
  file: File
3
  url: string
4
  onProgress?: (loaded: number, total: number) => void
5
  onComplete?: (response: unknown) => void
6
  onError?: (error: Error) => void
7
}
8

9
function uploadFile({ file, url, onProgress, onComplete, onError }: UploadOptions): () => void {
10
  const xhr = new XMLHttpRequest()
11

12
  xhr.upload.addEventListener("progress", (e) => {
13
    if (e.lengthComputable) {
14
      onProgress?.(e.loaded, e.total)
15
    }
16
  })
17

18
  xhr.addEventListener("load", () => {
19
    if (xhr.status >= 200 && xhr.status < 300) {
20
      onComplete?.(JSON.parse(xhr.responseText))
21
    } else {
22
      onError?.(new Error(`Upload failed: ${xhr.status}`))
23
    }
24
  })
25

26
  xhr.addEventListener("error", () => onError?.(new Error("Network error")))
27

28
  const formData = new FormData()
29
  formData.append("file", file)
7 collapsed lines
30

31
  xhr.open("POST", url)
32
  xhr.send(formData)
33

34
  // Return abort function
35
  return () => xhr.abort()
36
}

5 collapsed lines
1
interface ChunkedUploadOptions {
2
  file: File
3
  uploadUrl: string
4
  chunkSize?: number // Default 5MB
5
  onProgress?: (uploaded: number, total: number) => void
6
  onComplete?: () => void
7
  onError?: (error: Error) => void
8
}
9

10
async function chunkedUpload({
11
  file,
12
  uploadUrl,
13
  chunkSize = 5 * 1024 * 1024,
14
  onProgress,
15
  onComplete,
16
  onError,
17
}: ChunkedUploadOptions): Promise<void> {
18
  let offset = 0
19

20
  // Query server for existing offset (resume support)
21
  try {
22
    const headResponse = await fetch(uploadUrl, { method: "HEAD" })
23
    const serverOffset = headResponse.headers.get("Upload-Offset")
24
    if (serverOffset) {
25
      offset = parseInt(serverOffset, 10)
26
    }
27
  } catch {
28
    // No existing upload, start from 0
29
  }
30

31
  while (offset < file.size) {
32
    const chunk = file.slice(offset, offset + chunkSize)
33

34
    // Use XHR for per-chunk progress
35
    await new Promise<void>((resolve, reject) => {
36
      const xhr = new XMLHttpRequest()
37

38
      xhr.upload.addEventListener("progress", (e) => {
39
        if (e.lengthComputable) {
40
          onProgress?.(offset + e.loaded, file.size)
41
        }
42
      })
43

44
      xhr.addEventListener("load", () => {
45
        if (xhr.status >= 200 && xhr.status < 300) {
46
          resolve()
47
        } else {
48
          reject(new Error(`Chunk upload failed: ${xhr.status}`))
49
        }
50
      })
51

52
      xhr.addEventListener("error", () => reject(new Error("Network error")))
53

54
      xhr.open("PATCH", uploadUrl)
55
      xhr.setRequestHeader("Content-Type", "application/offset+octet-stream")
56
      xhr.setRequestHeader("Upload-Offset", String(offset))
57
      xhr.send(chunk)
58
    })
59

60
    offset += chunk.size
61
  }
62

63
  onComplete?.()
64
}

8 collapsed lines
1
interface TusUploadOptions {
2
  file: File
3
  endpoint: string // Server endpoint for creating uploads
4
  chunkSize?: number
5
  metadata?: Record<string, string>
6
  onProgress?: (uploaded: number, total: number) => void
7
  onComplete?: (uploadUrl: string) => void
8
  onError?: (error: Error) => void
9
}
10

11
class TusUpload {
12
  private uploadUrl: string | null = null
13
  private offset = 0
14
  private aborted = false
15

16
  constructor(private options: TusUploadOptions) {}
17

18
  async start(): Promise<void> {
19
    const { file, endpoint, metadata, chunkSize = 5 * 1024 * 1024 } = this.options
20

21
    // Phase 1: Create upload resource
22
    if (!this.uploadUrl) {
23
      const encodedMetadata = metadata
24
        ? Object.entries(metadata)
25
            .map(([k, v]) => `${k} ${btoa(v)}`)
26
            .join(",")
27
        : undefined
28

29
      const createResponse = await fetch(endpoint, {
30
        method: "POST",
31
        headers: {
32
          "Tus-Resumable": "1.0.0",
33
          "Upload-Length": String(file.size),
34
          ...(encodedMetadata && { "Upload-Metadata": encodedMetadata }),
35
        },
36
      })
37

38
      if (createResponse.status !== 201) {
39
        throw new Error(`Failed to create upload: ${createResponse.status}`)
40
      }
41

42
      this.uploadUrl = createResponse.headers.get("Location")
43
      if (!this.uploadUrl) {
44
        throw new Error("Server did not return upload URL")
45
      }
46
    }
47

48
    // Phase 2: Query current offset (for resume)
49
    const headResponse = await fetch(this.uploadUrl, {
50
      method: "HEAD",
51
      headers: { "Tus-Resumable": "1.0.0" },
52
    })
53

54
    const serverOffset = headResponse.headers.get("Upload-Offset")
55
    this.offset = serverOffset ? parseInt(serverOffset, 10) : 0
56

57
    // Phase 3: Upload chunks
58
    while (this.offset < file.size && !this.aborted) {
59
      const chunk = file.slice(this.offset, this.offset + chunkSize)
60

61
      const patchResponse = await fetch(this.uploadUrl, {
62
        method: "PATCH",
63
        headers: {
64
          "Tus-Resumable": "1.0.0",
65
          "Upload-Offset": String(this.offset),
66
          "Content-Type": "application/offset+octet-stream",
67
        },
68
        body: chunk,
69
      })
70

71
      if (patchResponse.status !== 204) {
72
        throw new Error(`Chunk upload failed: ${patchResponse.status}`)
73
      }
74

75
      const newOffset = patchResponse.headers.get("Upload-Offset")
76
      this.offset = newOffset ? parseInt(newOffset, 10) : this.offset + chunk.size
77

78
      this.options.onProgress?.(this.offset, file.size)
79
    }
80

81
    if (!this.aborted) {
82
      this.options.onComplete?.(this.uploadUrl)
83
    }
84
  }
85

86
  abort(): void {
87
    this.aborted = true
88
  }
89

4 collapsed lines
90
  getUploadUrl(): string | null {
91
    return this.uploadUrl
92
  }
93
}

3 collapsed lines
1
function createDropZone(element: HTMLElement, onFiles: (files: File[]) => void): () => void {
2
  const handleDragOver = (e: DragEvent) => {
3
    e.preventDefault()
4
    e.dataTransfer!.dropEffect = "copy"
5
    element.classList.add("drag-over")
6
  }
7

8
  const handleDragLeave = () => {
9
    element.classList.remove("drag-over")
10
  }
11

12
  const handleDrop = (e: DragEvent) => {
13
    e.preventDefault()
14
    element.classList.remove("drag-over")
15

16
    const files: File[] = []
17

18
    // DataTransferItemList for directory support
19
    if (e.dataTransfer?.items) {
20
      for (const item of e.dataTransfer.items) {
21
        if (item.kind === "file") {
22
          const file = item.getAsFile()
23
          if (file) files.push(file)
24
        }
25
      }
26
    } else if (e.dataTransfer?.files) {
27
      // Fallback for older browsers
28
      files.push(...Array.from(e.dataTransfer.files))
29
    }
30

31
    onFiles(files)
32
  }
33

34
  element.addEventListener("dragover", handleDragOver)
35
  element.addEventListener("dragleave", handleDragLeave)
36
  element.addEventListener("drop", handleDrop)
37

38
  return () => {
39
    element.removeEventListener("dragover", handleDragOver)
4 collapsed lines
40
    element.removeEventListener("dragleave", handleDragLeave)
41
    element.removeEventListener("drop", handleDrop)
42
  }
43
}

2 collapsed lines
1
const MAGIC_SIGNATURES: Record<string, number[]> = {
2
  "image/jpeg": [0xff, 0xd8, 0xff],
3
  "image/png": [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a],
4
  "image/gif": [0x47, 0x49, 0x46, 0x38], // "GIF8"
5
  "image/webp": [0x52, 0x49, 0x46, 0x46], // "RIFF" (check offset 8 for "WEBP")
6
  "application/pdf": [0x25, 0x50, 0x44, 0x46], // "%PDF"
7
}
8

9
async function detectFileType(file: File): Promise<string | null> {
10
  const slice = file.slice(0, 12) // Read first 12 bytes
11
  const buffer = await slice.arrayBuffer()
12
  const bytes = new Uint8Array(buffer)
13

14
  for (const [mimeType, signature] of Object.entries(MAGIC_SIGNATURES)) {
15
    if (signature.every((byte, i) => bytes[i] === byte)) {
16
      // Special case: WebP requires additional check at offset 8
17
      if (mimeType === "image/webp") {
18
        const webpMarker = new TextDecoder().decode(bytes.slice(8, 12))
19
        if (webpMarker !== "WEBP") continue
20
      }
21
      return mimeType
22
    }
23
  }
24

25
  // Fallback to extension-based type
26
  return file.type || null
27
}

1
async function validateImageDimensions(
2
  file: File,
3
  maxWidth: number,
4
  maxHeight: number,
5
): Promise<{ width: number; height: number }> {
6
  const url = URL.createObjectURL(file)
7

8
  try {
9
    const img = await new Promise<HTMLImageElement>((resolve, reject) => {
10
      const image = new Image()
11
      image.onload = () => resolve(image)
12
      image.onerror = () => reject(new Error("Failed to load image"))
13
      image.src = url
14
    })
15

16
    if (img.width > maxWidth || img.height > maxHeight) {
17
      throw new Error(`Image ${img.width}x${img.height} exceeds max ${maxWidth}x${maxHeight}`)
18
    }
19

20
    return { width: img.width, height: img.height }
21
  } finally {
22
    URL.revokeObjectURL(url) // Always clean up
23
  }
24
}

1
function createImagePreview(file: File, imgElement: HTMLImageElement): () => void {
2
  const url = URL.createObjectURL(file)
3
  imgElement.src = url
4

5
  // Return cleanup function
6
  return () => URL.revokeObjectURL(url)
7
}
8

9
// Usage with cleanup
10
const cleanup = createImagePreview(file, previewImg)
11
// Later, when preview no longer needed:
12
cleanup()

2 collapsed lines
1
// thumbnail-worker.ts
2
self.addEventListener("message", async (e: MessageEvent<File>) => {
3
  const file = e.data
4
  const maxSize = 200
5

6
  // createImageBitmap doesn't block and works in workers
7
  const bitmap = await createImageBitmap(file)
8

9
  // Calculate scaled dimensions
10
  let { width, height } = bitmap
11
  if (width > height) {
12
    if (width > maxSize) {
13
      height = (height * maxSize) / width
14
      width = maxSize
15
    }
16
  } else {
17
    if (height > maxSize) {
18
      width = (width * maxSize) / height
19
      height = maxSize
20
    }
21
  }
22

23
  // OffscreenCanvas enables canvas operations in workers
24
  const canvas = new OffscreenCanvas(width, height)
25
  const ctx = canvas.getContext("2d")!
26
  ctx.drawImage(bitmap, 0, 0, width, height)
27

28
  const blob = await canvas.convertToBlob({ type: "image/jpeg", quality: 0.8 })
29

2 collapsed lines
30
  self.postMessage(blob)
31
})

1
// main-thread.ts
2
const worker = new Worker("thumbnail-worker.ts", { type: "module" })
3

4
function generateThumbnail(file: File): Promise<Blob> {
5
  return new Promise((resolve) => {
6
    worker.onmessage = (e) => resolve(e.data)
7
    worker.postMessage(file)
8
  })
9
}

1
const FILE_ICONS: Record<string, string> = {
2
  "application/pdf": "pdf-icon.svg",
3
  "application/zip": "archive-icon.svg",
4
  "application/x-zip-compressed": "archive-icon.svg",
5
  "text/plain": "text-icon.svg",
6
  "video/": "video-icon.svg",
7
  "audio/": "audio-icon.svg",
8
}
9

10
function getFileIcon(file: File): string {
11
  // Check exact MIME type
12
  if (FILE_ICONS[file.type]) {
13
    return FILE_ICONS[file.type]
14
  }
15

16
  // Check MIME type prefix (video/, audio/)
17
  for (const [prefix, icon] of Object.entries(FILE_ICONS)) {
18
    if (prefix.endsWith("/") && file.type.startsWith(prefix)) {
19
      return icon
20
    }
21
  }
22

23
  return "generic-file-icon.svg"
24
}

5 collapsed lines
1
interface UploadProgress {
2
  file: File
3
  loaded: number
4
  total: number
5
  percent: number
6
  speed: number // bytes/second
7
  remaining: number // seconds
8
}
9

10
class ProgressTracker {
11
  private startTime = Date.now()
12
  private samples: Array<{ time: number; loaded: number }> = []
13

14
  constructor(private total: number) {}
15

16
  update(loaded: number): UploadProgress {
17
    const now = Date.now()
18
    this.samples.push({ time: now, loaded })
19

20
    // Keep last 5 seconds of samples for speed calculation
21
    const cutoff = now - 5000
22
    this.samples = this.samples.filter((s) => s.time > cutoff)
23

24
    // Calculate speed from samples
25
    let speed = 0
26
    if (this.samples.length >= 2) {
27
      const oldest = this.samples[0]
28
      const elapsed = (now - oldest.time) / 1000
29
      const bytesTransferred = loaded - oldest.loaded
30
      speed = elapsed > 0 ? bytesTransferred / elapsed : 0
31
    }
32

33
    const remaining = speed > 0 ? (this.total - loaded) / speed : Infinity
34

35
    return {
36
      loaded,
37
      total: this.total,
38
      percent: (loaded / this.total) * 100,
39
      speed,
40
      remaining,
41
    }
42
  }
43
}

8 collapsed lines
1
type UploadStatus = "pending" | "uploading" | "completed" | "failed"
2

3
interface QueuedUpload {
4
  id: string
5
  file: File
6
  status: UploadStatus
7
  progress: number
8
  error?: Error
9
}
10

11
class UploadQueue {
12
  private queue: QueuedUpload[] = []
13
  private concurrency: number
14
  private activeCount = 0
15
  private onUpdate?: (queue: QueuedUpload[]) => void
16

17
  constructor(options: { concurrency?: number; onUpdate?: (queue: QueuedUpload[]) => void }) {
18
    this.concurrency = options.concurrency ?? 3
19
    this.onUpdate = options.onUpdate
20
  }
21

22
  add(files: File[]): void {
23
    const newItems = files.map((file) => ({
24
      id: crypto.randomUUID(),
25
      file,
26
      status: "pending" as UploadStatus,
27
      progress: 0,
28
    }))
29

30
    this.queue.push(...newItems)
31
    this.notify()
32
    this.processNext()
33
  }
34

35
  private async processNext(): Promise<void> {
36
    if (this.activeCount >= this.concurrency) return
37

38
    const next = this.queue.find((item) => item.status === "pending")
39
    if (!next) return
40

41
    this.activeCount++
42
    next.status = "uploading"
43
    this.notify()
44

45
    try {
46
      await this.uploadFile(next)
47
      next.status = "completed"
48
      next.progress = 100
49
    } catch (error) {
50
      next.status = "failed"
51
      next.error = error as Error
52
    }
53

54
    this.activeCount--
55
    this.notify()
56
    this.processNext()
57
  }
58

59
  private async uploadFile(item: QueuedUpload): Promise<void> {
60
    // Implementation calls actual upload function
61
    // Updates item.progress during upload
62
  }
63

64
  private notify(): void {
65
    this.onUpdate?.(this.queue)
66
  }
67

68
  cancel(id: string): void {
69
    const item = this.queue.find((q) => q.id === id)
17 collapsed lines
70
    if (item && item.status === "pending") {
71
      this.queue = this.queue.filter((q) => q.id !== id)
72
      this.notify()
73
    }
74
  }
75

76
  retry(id: string): void {
77
    const item = this.queue.find((q) => q.id === id)
78
    if (item && item.status === "failed") {
79
      item.status = "pending"
80
      item.progress = 0
81
      item.error = undefined
82
      this.notify()
83
      this.processNext()
84
    }
85
  }
86
}

3 collapsed lines
1
async function uploadWithRetry<T>(
2
  uploadFn: () => Promise<T>,
3
  options: { maxRetries?: number; baseDelay?: number } = {},
4
): Promise<T> {
5
  const { maxRetries = 3, baseDelay = 1000 } = options
6
  let lastError: Error
7

8
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
9
    try {
10
      return await uploadFn()
11
    } catch (error) {
12
      lastError = error as Error
13

14
      // Don't retry on client errors (4xx)
15
      if (error instanceof Response && error.status >= 400 && error.status < 500) {
16
        throw error
17
      }
18

19
      if (attempt < maxRetries) {
20
        const delay = baseDelay * Math.pow(2, attempt)
21
        const jitter = delay * 0.2 * Math.random()
22
        await new Promise((r) => setTimeout(r, delay + jitter))
23
      }
24
    }
25
  }
26

27
  throw lastError!
28
}

5 collapsed lines
1
interface StoredUploadState {
2
  id: string
3
  fileName: string
4
  fileSize: number
5
  uploadUrl: string
6
  offset: number
7
  createdAt: number
8
  // Store file reference if same session
9
  file?: File
10
}
11

12
class UploadStateStore {
13
  private db: IDBDatabase | null = null
14

15
  async init(): Promise<void> {
16
    return new Promise((resolve, reject) => {
17
      const request = indexedDB.open("upload-state", 1)
18

19
      request.onupgradeneeded = (e) => {
20
        const db = (e.target as IDBOpenDBRequest).result
21
        db.createObjectStore("uploads", { keyPath: "id" })
22
      }
23

24
      request.onsuccess = (e) => {
25
        this.db = (e.target as IDBOpenDBRequest).result
26
        resolve()
27
      }
28

29
      request.onerror = () => reject(request.error)
30
    })
31
  }
32

33
  async save(state: StoredUploadState): Promise<void> {
34
    if (!this.db) throw new Error("DB not initialized")
35

36
    return new Promise((resolve, reject) => {
37
      const tx = this.db!.transaction("uploads", "readwrite")
38
      const store = tx.objectStore("uploads")
39
      const request = store.put(state)
40
      request.onsuccess = () => resolve()
41
      request.onerror = () => reject(request.error)
42
    })
43
  }
44

45
  async getAll(): Promise<StoredUploadState[]> {
46
    if (!this.db) throw new Error("DB not initialized")
47

48
    return new Promise((resolve, reject) => {
49
      const tx = this.db!.transaction("uploads", "readonly")
19 collapsed lines
50
      const store = tx.objectStore("uploads")
51
      const request = store.getAll()
52
      request.onsuccess = () => resolve(request.result)
53
      request.onerror = () => reject(request.error)
54
    })
55
  }
56

57
  async delete(id: string): Promise<void> {
58
    if (!this.db) throw new Error("DB not initialized")
59

60
    return new Promise((resolve, reject) => {
61
      const tx = this.db!.transaction("uploads", "readwrite")
62
      const store = tx.objectStore("uploads")
63
      const request = store.delete(id)
64
      request.onsuccess = () => resolve()
65
      request.onerror = () => reject(request.error)
66
    })
67
  }
68
}

1
function AccessibleDropzone({ onFiles }: { onFiles: (files: File[]) => void }) {
2
  const inputRef = useRef<HTMLInputElement>(null);
3

4
  const handleKeyDown = (e: KeyboardEvent) => {
5
    if (e.key === 'Enter' || e.key === ' ') {
6
      e.preventDefault();
7
      inputRef.current?.click();
8
    }
9
  };
10

11
  return (
12
    <div
13
      role="button"
14
      tabIndex={0}
15
      onKeyDown={handleKeyDown}
16
      aria-label="Upload files. Press Enter or Space to open file picker, or drag and drop files here."
17
    >
18
      <input
19
        ref={inputRef}
20
        type="file"
21
        multiple
22
        className="visually-hidden"
23
        onChange={(e) => onFiles(Array.from(e.target.files || []))}
24
      />
25
      <span aria-hidden="true">Drag files here or click to upload</span>
26
    </div>
27
  );
28
}

1
function useProgressAnnouncement() {
2
  const [announcement, setAnnouncement] = useState('');
3

4
  const announce = useCallback((progress: number, fileName: string) => {
5
    // Announce at key milestones to avoid noise
6
    if (progress === 0) {
7
      setAnnouncement(`Starting upload of ${fileName}`);
8
    } else if (progress === 100) {
9
      setAnnouncement(`${fileName} upload complete`);
10
    } else if (progress % 25 === 0) {
11
      setAnnouncement(`${fileName}: ${progress}% uploaded`);
12
    }
13
  }, []);
14

15
  return {
16
    announce,
17
    AriaLive: () => (
18
      <div aria-live="polite" aria-atomic="true" className="visually-hidden">
19
        {announcement}
20
      </div>
21
    )
22
  };
23
}