@uploadista/react-native-core 0.0.13 → 0.0.14

package/src/hooks/use-upload.ts

@@ -1,25 +1,20 @@
-import type { UploadistaEvent } from "@uploadista/client-core";
+import type {
+  UploadistaUploadOptions,
+  UploadMetrics,
+} from "@uploadista/client-core";
+import {
+  UploadManager,
+  type UploadState,
+  type UploadStatus,
+} from "@uploadista/client-core";
 import type { UploadFile } from "@uploadista/core/types";
-import { UploadEventType } from "@uploadista/core/types";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { FilePickResult } from "../types";
+import { createBlobFromBuffer } from "../types/platform-types";
 import { useUploadistaContext } from "./use-uploadista-context";
 
-export type UploadStatus =
-  | "idle"
-  | "uploading"
-  | "success"
-  | "error"
-  | "aborted";
-
-export interface UploadState {
-  status: UploadStatus;
-  progress: number;
-  bytesUploaded: number;
-  totalBytes: number | null;
-  error: Error | null;
-  result: UploadFile | null;
-}
+// Re-export types from core for convenience
+export type { UploadState, UploadStatus };
 
 export interface UseUploadOptions {
   /**
@@ -41,7 +36,7 @@ export interface UseUploadOptions {
    * Called when upload progress updates
    */
   onProgress?: (
-    progress: number,
+    uploadId: string,
     bytesUploaded: number,
     totalBytes: number | null,
   ) => void;
@@ -111,6 +106,11 @@ export interface UseUploadReturn {
    * Whether the upload can be retried
    */
   canRetry: boolean;
+
+  /**
+   * Upload metrics and performance insights from the client
+   */
+  metrics: UploadMetrics;
 }
 
 const initialState: UploadState = {
@@ -123,7 +123,7 @@ const initialState: UploadState = {
 };
 
 /**
- * React hook for managing individual file uploads with full state management.
+ * React Native hook for managing individual file uploads with full state management.
  * Provides upload progress tracking, error handling, abort functionality, and retry logic.
  *
  * Must be used within an UploadistaProvider.
@@ -140,16 +140,14 @@ const initialState: UploadState = {
  *     onProgress: (progress) => console.log('Progress:', progress + '%'),
  *   });
  *
- *   const handlePickFile = async () => {
- *     const file = await fileSystemProvider.pickDocument();
- *     if (file) {
- *       await upload.upload(file);
- *     }
+ *   const handleFilePick = async () => {
+ *     const file = await pickFile();
+ *     if (file) await upload.upload(file);
  *   };
  *
  *   return (
  *     <View>
- *       <Button title="Pick File" onPress={handlePickFile} />
+ *       <Button title="Pick File" onPress={handleFilePick} />
  *       {upload.isUploading && <Text>Progress: {upload.state.progress}%</Text>}
  *       {upload.state.error && <Text>Error: {upload.state.error.message}</Text>}
  *       {upload.canRetry && <Button title="Retry" onPress={upload.retry} />}
@@ -160,226 +158,92 @@ const initialState: UploadState = {
  * ```
  */
 export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
-  const { client, fileSystemProvider, subscribeToEvents } =
-    useUploadistaContext();
+  const { client, fileSystemProvider } = useUploadistaContext();
   const [state, setState] = useState<UploadState>(initialState);
-  const abortControllerRef = useRef<{ abort: () => void } | null>(null);
+  const managerRef = useRef<UploadManager | null>(null);
   const lastFileRef = useRef<FilePickResult | null>(null);
-  const currentUploadIdRef = useRef<string | null>(null);
-
-  const updateState = useCallback((update: Partial<UploadState>) => {
-    setState((prev) => ({ ...prev, ...update }));
-  }, []);
-
-  const reset = useCallback(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-    setState(initialState);
-    lastFileRef.current = null;
-    currentUploadIdRef.current = null;
-  }, []);
-
-  const abort = useCallback(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-
-    updateState({
-      status: "aborted",
-    });
-
-    options.onAbort?.();
-  }, [options, updateState]);
-
-  const upload = useCallback(
-    async (file: FilePickResult) => {
-      // Handle cancelled picker
-      if (file.status === "cancelled") {
-        return;
-      }
-
-      // Handle picker error
-      if (file.status === "error") {
-        updateState({
-          status: "error",
-          error: file.error,
-        });
-        options.onError?.(file.error);
-        return;
-      }
-
-      // Reset any previous state
-      setState({
-        ...initialState,
-        status: "uploading",
-        totalBytes: file.data.size,
-      });
 
-      lastFileRef.current = file;
+  // Create UploadManager instance
+  useEffect(() => {
+    // Create upload function that handles React Native file reading
+    const uploadFn = async (input: unknown, opts: UploadistaUploadOptions) => {
+      const file = input as FilePickResult;
 
-      try {
-        // Read file content
+      if (file.status === "success") {
+        // Read file content from React Native file system
         const fileContent = await fileSystemProvider.readFile(file.data.uri);
 
-        // Create a Blob from the file content
-        // Convert ArrayBuffer to Uint8Array for better compatibility
-        const data =
-          fileContent instanceof ArrayBuffer
-            ? new Uint8Array(fileContent)
-            : fileContent;
-        // Note: Using any cast here because React Native Blob accepts BufferSource
-        // but TypeScript's lib.dom.d.ts Blob type doesn't include it
-        // biome-ignore lint/suspicious/noExplicitAny: React Native Blob accepts BufferSource
-        const blob = new Blob([data as any], {
+        // Create a Blob from the file content using platform-aware utility
+        const blob = createBlobFromBuffer(fileContent, {
           type: file.data.mimeType || "application/octet-stream",
-          // biome-ignore lint/suspicious/noExplicitAny: BlobPropertyBag type differs by platform
-        } as any);
-
-        // use the Blob (for React Native)
-        const uploadInput = blob;
-
-        // Start the upload using the client
-        const uploadPromise = client.upload(uploadInput, {
-          metadata: options.metadata,
-          uploadLengthDeferred: options.uploadLengthDeferred,
-          uploadSize: options.uploadSize,
-
-          onStart: ({ uploadId }) => {
-            currentUploadIdRef.current = uploadId;
-          },
-
-          onProgress: (
-            _uploadId: string,
-            bytesUploaded: number,
-            totalBytes: number | null,
-          ) => {
-            const progress = totalBytes
-              ? Math.round((bytesUploaded / totalBytes) * 100)
-              : 0;
-
-            updateState({
-              progress,
-              bytesUploaded,
-              totalBytes,
-            });
-
-            options.onProgress?.(progress, bytesUploaded, totalBytes);
-          },
-
-          onChunkComplete: (
-            chunkSize: number,
-            bytesAccepted: number,
-            bytesTotal: number | null,
-          ) => {
-            options.onChunkComplete?.(chunkSize, bytesAccepted, bytesTotal);
-          },
-
-          onSuccess: (result: UploadFile) => {
-            updateState({
-              status: "success",
-              result,
-              progress: 100,
-              bytesUploaded: result.size || 0,
-              totalBytes: result.size || null,
-            });
-
-            options.onSuccess?.(result);
-            abortControllerRef.current = null;
-          },
-
-          onError: (error: Error) => {
-            updateState({
-              status: "error",
-              error,
-            });
-
-            options.onError?.(error);
-            abortControllerRef.current = null;
-          },
-
-          onShouldRetry: options.onShouldRetry,
-        });
-
-        // Handle the promise to get the abort controller
-        const controller = await uploadPromise;
-        abortControllerRef.current = controller;
-      } catch (error) {
-        updateState({
-          status: "error",
-          error: error as Error,
         });
 
-        options.onError?.(error as Error);
-        abortControllerRef.current = null;
+        // Upload the Blob
+        return client.upload(blob, opts);
       }
-    },
-    [client, fileSystemProvider, options, updateState],
-  );
 
-  const retry = useCallback(() => {
-    if (
-      lastFileRef.current &&
-      (state.status === "error" || state.status === "aborted")
-    ) {
-      upload(lastFileRef.current);
-    }
-  }, [upload, state.status]);
+      return Promise.resolve({ abort: () => {} });
+    };
+
+    managerRef.current = new UploadManager(
+      uploadFn,
+      {
+        onStateChange: setState,
+        onProgress: options.onProgress,
+        onChunkComplete: options.onChunkComplete,
+        onSuccess: options.onSuccess,
+        onError: options.onError,
+        onAbort: options.onAbort,
+      },
+      {
+        metadata: options.metadata,
+        uploadLengthDeferred: options.uploadLengthDeferred,
+        uploadSize: options.uploadSize,
+        onShouldRetry: options.onShouldRetry,
+      },
+    );
+
+    return () => {
+      managerRef.current?.cleanup();
+    };
+  }, [client, fileSystemProvider, options]);
+
+  // Upload function - stores file reference for retry
+  const upload = useCallback(async (file: FilePickResult) => {
+    lastFileRef.current = file;
+    await managerRef.current?.upload(file);
+  }, []);
 
-  // Subscribe to events from context (WebSocket events)
-  useEffect(() => {
-    const unsubscribe = subscribeToEvents((event: UploadistaEvent) => {
-      // Handle upload progress events
-      const uploadEvent = event as {
-        type: string;
-        data?: { id: string; progress: number; total: number };
-      };
-
-      if (
-        uploadEvent.type === UploadEventType.UPLOAD_PROGRESS &&
-        uploadEvent.data
-      ) {
-        const {
-          id: uploadId,
-          progress: bytesUploaded,
-          total: totalBytes,
-        } = uploadEvent.data;
-
-        if (uploadId !== currentUploadIdRef.current) {
-          return;
-        }
-
-        // Update state for this upload
-        const progress = totalBytes
-          ? Math.round((bytesUploaded / totalBytes) * 100)
-          : 0;
-
-        setState((prev) => {
-          // Only update if we're currently uploading
-          if (prev.status === "uploading") {
-            return {
-              ...prev,
-              progress,
-              bytesUploaded,
-              totalBytes,
-            };
-          }
-          return prev;
-        });
+  // Abort function
+  const abort = useCallback(() => {
+    managerRef.current?.abort();
+  }, []);
 
-        options.onProgress?.(progress, bytesUploaded, totalBytes);
-      }
-    });
+  // Reset function
+  const reset = useCallback(() => {
+    managerRef.current?.reset();
+    lastFileRef.current = null;
+  }, []);
 
-    return unsubscribe;
-  }, [subscribeToEvents, options]);
+  // Retry function
+  const retry = useCallback(() => {
+    if (lastFileRef.current && managerRef.current?.canRetry()) {
+      managerRef.current.retry();
+    }
+  }, []);
 
+  // Derive computed values from state
   const isUploading = state.status === "uploading";
-  const canRetry =
-    (state.status === "error" || state.status === "aborted") &&
-    lastFileRef.current !== null;
+  const canRetry = managerRef.current?.canRetry() ?? false;
+
+  // Create metrics object that delegates to the upload client
+  const metrics: UploadMetrics = {
+    getInsights: () => client.getChunkingInsights(),
+    exportMetrics: () => client.exportMetrics(),
+    getNetworkMetrics: () => client.getNetworkMetrics(),
+    getNetworkCondition: () => client.getNetworkCondition(),
+    resetMetrics: () => client.resetMetrics(),
+  };
 
   return {
     state,
@@ -389,5 +253,6 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
     retry,
     isUploading,
     canRetry,
+    metrics,
   };
 }

package/src/types/index.ts

@@ -1,2 +1,3 @@
+export * from "./platform-types";
 export * from "./types";
 export * from "./upload-input";

package/src/types/platform-types.ts

@@ -0,0 +1,105 @@
+/**
+ * Platform-specific type definitions for React Native
+ *
+ * React Native's Blob implementation differs from the browser's Blob API.
+ * This file provides proper type definitions and guards for platform-specific behavior.
+ */
+
+/**
+ * BufferSource represents data that can be passed to Blob constructor
+ * Includes both ArrayBuffer and typed arrays (Uint8Array, etc.)
+ */
+export type BufferSource = ArrayBuffer | ArrayBufferView;
+
+/**
+ * React Native Blob constructor options
+ * Extends standard BlobPropertyBag with platform-specific properties
+ */
+export interface ReactNativeBlobOptions {
+  /** MIME type of the blob */
+  type?: string;
+  /** Platform-specific: file path for optimization (React Native only) */
+  path?: string;
+}
+
+/**
+ * React Native Blob constructor type
+ * Unlike browser Blob, accepts BufferSource in the parts array
+ */
+export interface ReactNativeBlobConstructor {
+  new (
+    parts?: Array<BufferSource | Blob | string>,
+    options?: ReactNativeBlobOptions,
+  ): Blob;
+  prototype: Blob;
+}
+
+/**
+ * Type guard to check if a value is ArrayBuffer
+ */
+export function isArrayBuffer(value: unknown): value is ArrayBuffer {
+  return value instanceof ArrayBuffer;
+}
+
+/**
+ * Type guard to check if a value is ArrayBufferView (typed array)
+ */
+export function isArrayBufferView(value: unknown): value is ArrayBufferView {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    "buffer" in value &&
+    value.buffer instanceof ArrayBuffer
+  );
+}
+
+/**
+ * Type guard to check if a value is BufferSource
+ */
+export function isBufferSource(value: unknown): value is BufferSource {
+  return isArrayBuffer(value) || isArrayBufferView(value);
+}
+
+/**
+ * Type guard to check if we're in React Native environment
+ * (checks for global.navigator.product === 'ReactNative')
+ */
+export function isReactNativeEnvironment(): boolean {
+  return (
+    typeof global !== "undefined" &&
+    typeof global.navigator !== "undefined" &&
+    global.navigator.product === "ReactNative"
+  );
+}
+
+/**
+ * Create a Blob from BufferSource with proper typing for React Native
+ *
+ * This function handles the platform differences between browser and React Native Blob APIs.
+ * React Native's Blob constructor accepts BufferSource directly, while browser Blob requires
+ * conversion to Uint8Array first in some cases.
+ *
+ * @param data - ArrayBuffer or typed array to convert to Blob
+ * @param options - Blob options including MIME type
+ * @returns Platform-appropriate Blob instance
+ *
+ * @example
+ * ```typescript
+ * const arrayBuffer = await fileSystemProvider.readFile(uri);
+ * const blob = createBlobFromBuffer(arrayBuffer, {
+ *   type: 'image/jpeg'
+ * });
+ * ```
+ */
+export function createBlobFromBuffer(
+  data: BufferSource,
+  options?: ReactNativeBlobOptions,
+): Blob {
+  // Convert ArrayBuffer to Uint8Array for consistent handling
+  const uint8Array = data instanceof ArrayBuffer ? new Uint8Array(data) : data;
+
+  // In React Native, Blob constructor accepts BufferSource
+  // Cast to ReactNativeBlobConstructor to use the correct signature
+  const BlobConstructor = Blob as unknown as ReactNativeBlobConstructor;
+  return new BlobConstructor([uint8Array], options);
+}