create-fluxstack 1.10.1 → 1.12.1

package/core/client/hooks/useChunkedUpload.ts

@@ -5,20 +5,50 @@ import type {
   FileUploadChunkMessage,
   FileUploadCompleteMessage,
   FileUploadProgressResponse,
-  FileUploadCompleteResponse
-} from '@/core/types/types'
+  FileUploadCompleteResponse,
+  BinaryChunkHeader
+} from '@core/types/types'
 
 export interface ChunkedUploadOptions {
   chunkSize?: number // Default 64KB (used as initial if adaptive is enabled)
   maxFileSize?: number // Default 50MB
   allowedTypes?: string[]
-  sendMessageAndWait?: (message: any, timeout?: number) => Promise<any> // WebSocket send function
+  sendMessageAndWait?: (message: any, timeout?: number) => Promise<any> // WebSocket send function for JSON
+  sendBinaryAndWait?: (data: ArrayBuffer, requestId: string, timeout?: number) => Promise<any> // WebSocket send function for binary
   onProgress?: (progress: number, bytesUploaded: number, totalBytes: number) => void
   onComplete?: (response: FileUploadCompleteResponse) => void
   onError?: (error: string) => void
   // Adaptive chunking options
   adaptiveChunking?: boolean // Enable adaptive chunk sizing (default: false)
   adaptiveConfig?: Partial<AdaptiveChunkConfig> // Adaptive chunking configuration
+  // Binary protocol (more efficient, ~33% less data)
+  useBinaryProtocol?: boolean // Enable binary chunk protocol (default: true)
+}
+
+/**
+ * Creates a binary message with header + data
+ * Format: [4 bytes header length][JSON header][binary data]
+ */
+function createBinaryChunkMessage(header: BinaryChunkHeader, chunkData: Uint8Array): ArrayBuffer {
+  const headerJson = JSON.stringify(header)
+  const headerBytes = new TextEncoder().encode(headerJson)
+
+  // Total size: 4 bytes (header length) + header + data
+  const totalSize = 4 + headerBytes.length + chunkData.length
+  const buffer = new ArrayBuffer(totalSize)
+  const view = new DataView(buffer)
+  const uint8View = new Uint8Array(buffer)
+
+  // Write header length (little-endian)
+  view.setUint32(0, headerBytes.length, true)
+
+  // Write header
+  uint8View.set(headerBytes, 4)
+
+  // Write chunk data
+  uint8View.set(chunkData, 4 + headerBytes.length)
+
+  return buffer
 }
 
 export interface ChunkedUploadState {
@@ -46,13 +76,18 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
     maxFileSize = 50 * 1024 * 1024, // 50MB default
     allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'],
     sendMessageAndWait,
+    sendBinaryAndWait,
     onProgress,
     onComplete,
     onError,
     adaptiveChunking = false,
-    adaptiveConfig
+    adaptiveConfig,
+    useBinaryProtocol = true // Default to binary for efficiency
   } = options
 
+  // Determine if we can use binary protocol
+  const canUseBinary = useBinaryProtocol && sendBinaryAndWait
+
   const abortControllerRef = useRef<AbortController | null>(null)
   const adaptiveSizerRef = useRef<AdaptiveChunkSizer | null>(null)
 
@@ -60,7 +95,7 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
   if (adaptiveChunking && !adaptiveSizerRef.current) {
     adaptiveSizerRef.current = new AdaptiveChunkSizer({
       initialChunkSize: chunkSize,
-      minChunkSize: 16 * 1024,  // 16KB min
+      minChunkSize: chunkSize,  // Do not go below initial chunk size by default
       maxChunkSize: 1024 * 1024, // 1MB max
       ...adaptiveConfig
     })
@@ -109,7 +144,8 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
         uploadId,
         filename: file.name,
         size: file.size,
-        adaptiveChunking
+        adaptiveChunking,
+        protocol: canUseBinary ? 'binary' : 'base64'
       })
 
       // Reset adaptive sizer for new upload
@@ -141,50 +177,64 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
 
       console.log('✅ Upload started successfully')
 
-      // Read file as ArrayBuffer for dynamic chunking
-      const fileArrayBuffer = await file.arrayBuffer()
-      const fileData = new Uint8Array(fileArrayBuffer)
-
       let offset = 0
       let chunkIndex = 0
       const estimatedTotalChunks = Math.ceil(file.size / initialChunkSize)
 
-      // Send chunks dynamically with adaptive sizing
-      while (offset < fileData.length) {
+      // Send chunks dynamically with adaptive sizing (read slice per chunk)
+      while (offset < file.size) {
         if (abortControllerRef.current?.signal.aborted) {
           throw new Error('Upload cancelled')
         }
 
         // Get current chunk size (adaptive or fixed)
         const currentChunkSize = adaptiveSizerRef.current?.getChunkSize() ?? chunkSize
-        const chunkEnd = Math.min(offset + currentChunkSize, fileData.length)
-        const chunkBytes = fileData.slice(offset, chunkEnd)
-
-        // Convert chunk to base64
-        let binary = ''
-        for (let j = 0; j < chunkBytes.length; j++) {
-          binary += String.fromCharCode(chunkBytes[j])
-        }
-        const base64Chunk = btoa(binary)
+        const chunkEnd = Math.min(offset + currentChunkSize, file.size)
+        const sliceBuffer = await file.slice(offset, chunkEnd).arrayBuffer()
+        const chunkBytes = new Uint8Array(sliceBuffer)
 
         // Record chunk start time for adaptive sizing
         const chunkStartTime = adaptiveSizerRef.current?.recordChunkStart(chunkIndex) ?? 0
+        const requestId = `chunk-${uploadId}-${chunkIndex}`
 
-        const chunkMessage: FileUploadChunkMessage = {
-          type: 'FILE_UPLOAD_CHUNK',
-          componentId,
-          uploadId,
-          chunkIndex,
-          totalChunks: estimatedTotalChunks, // Approximate, will be recalculated
-          data: base64Chunk,
-          requestId: `chunk-${uploadId}-${chunkIndex}`
-        }
-
-        console.log(`📤 Sending chunk ${chunkIndex + 1} (size: ${chunkBytes.length} bytes)`)
+        console.log(`📤 Sending chunk ${chunkIndex + 1} (size: ${chunkBytes.length} bytes)${canUseBinary ? ' [binary]' : ' [base64]'}`)
 
         try {
-          // Send chunk and wait for progress response
-          const progressResponse = await sendMessageAndWait(chunkMessage, 10000) as FileUploadProgressResponse
+          let progressResponse: FileUploadProgressResponse | undefined
+
+          if (canUseBinary) {
+            // Binary protocol: Send header + raw bytes (more efficient)
+            const header: BinaryChunkHeader = {
+              type: 'FILE_UPLOAD_CHUNK',
+              componentId,
+              uploadId,
+              chunkIndex,
+              totalChunks: estimatedTotalChunks,
+              requestId
+            }
+
+            const binaryMessage = createBinaryChunkMessage(header, chunkBytes)
+            progressResponse = await sendBinaryAndWait!(binaryMessage, requestId, 10000) as FileUploadProgressResponse
+          } else {
+            // JSON protocol: Convert to base64 (legacy/fallback)
+            let binary = ''
+            for (let j = 0; j < chunkBytes.length; j++) {
+              binary += String.fromCharCode(chunkBytes[j])
+            }
+            const base64Chunk = btoa(binary)
+
+            const chunkMessage: FileUploadChunkMessage = {
+              type: 'FILE_UPLOAD_CHUNK',
+              componentId,
+              uploadId,
+              chunkIndex,
+              totalChunks: estimatedTotalChunks,
+              data: base64Chunk,
+              requestId
+            }
+
+            progressResponse = await sendMessageAndWait!(chunkMessage, 10000) as FileUploadProgressResponse
+          }
 
           if (progressResponse) {
             const { progress, bytesUploaded } = progressResponse
@@ -306,4 +356,4 @@ export function useChunkedUpload(componentId: string, options: ChunkedUploadOpti
     cancelUpload,
     reset
   }
-}
+}

package/core/client/hooks/useLiveChunkedUpload.ts

@@ -0,0 +1,87 @@
+import { useMemo } from 'react'
+import { useLiveComponents } from '../LiveComponentsProvider'
+import { useChunkedUpload } from './useChunkedUpload'
+import type { ChunkedUploadOptions } from './useChunkedUpload'
+import type { FileUploadCompleteResponse } from '@core/types/types'
+
+type LiveUploadActions = {
+  $componentId: string | null
+  startUpload: (payload: { fileName: string; fileSize: number; fileType: string }) => Promise<any>
+  updateProgress: (payload: { progress: number; bytesUploaded: number; totalBytes: number }) => Promise<any>
+  completeUpload: (payload: { fileUrl: string }) => Promise<any>
+  failUpload: (payload: { error: string }) => Promise<any>
+  reset: () => Promise<any>
+}
+
+export interface LiveChunkedUploadOptions extends Omit<ChunkedUploadOptions, 'sendMessageAndWait' | 'onProgress' | 'onComplete' | 'onError'> {
+  onProgress?: (progress: number, bytesUploaded: number, totalBytes: number) => void
+  onComplete?: (response: FileUploadCompleteResponse) => void
+  onError?: (error: string) => void
+  fileUrlResolver?: (fileUrl: string) => string
+}
+
+export function useLiveChunkedUpload(live: LiveUploadActions, options: LiveChunkedUploadOptions = {}) {
+  const { sendMessageAndWait, sendBinaryAndWait } = useLiveComponents()
+
+  const {
+    onProgress,
+    onComplete,
+    onError,
+    fileUrlResolver,
+    ...chunkedOptions
+  } = options
+
+  const componentId = live.$componentId ?? ''
+
+  const base = useChunkedUpload(componentId, {
+    ...chunkedOptions,
+    sendMessageAndWait,
+    sendBinaryAndWait, // Enable binary protocol for efficient uploads
+    onProgress: (pct, uploaded, total) => {
+      void live.updateProgress({ progress: pct, bytesUploaded: uploaded, totalBytes: total }).catch(() => {})
+      onProgress?.(pct, uploaded, total)
+    },
+    onComplete: (response) => {
+      const rawUrl = response.fileUrl || ''
+      const resolvedUrl = fileUrlResolver ? fileUrlResolver(rawUrl) : rawUrl
+      void live.completeUpload({ fileUrl: resolvedUrl }).catch(() => {})
+      onComplete?.(response)
+    },
+    onError: (error) => {
+      void live.failUpload({ error }).catch(() => {})
+      onError?.(error)
+    }
+  })
+
+  const uploadFile = useMemo(() => {
+    return async (file: File) => {
+      if (!live.$componentId) {
+        const msg = 'WebSocket not ready. Wait a moment and try again.'
+        void live.failUpload({ error: msg }).catch(() => {})
+        onError?.(msg)
+        return
+      }
+
+      await live.startUpload({
+        fileName: file.name,
+        fileSize: file.size,
+        fileType: file.type || 'application/octet-stream'
+      })
+
+      await base.uploadFile(file)
+    }
+  }, [base, live, onError])
+
+  const reset = useMemo(() => {
+    return async () => {
+      await live.reset()
+      base.reset()
+    }
+  }, [base, live])
+
+  return {
+    ...base,
+    uploadFile,
+    reset
+  }
+}