@uploadista/expo 0.0.8 → 0.0.10

package/src/components/uploadista-provider.tsx

@@ -0,0 +1,188 @@
+"use client";
+import type { UploadistaEvent } from "@uploadista/client-core";
+import { UploadistaContext } from "@uploadista/react-native-core";
+import type { UploadistaContextType } from "@uploadista/react-native-core/hooks";
+import type React from "react";
+import { useCallback, useContext, useMemo, useRef } from "react";
+import {
+  type UseUploadistaClientOptions,
+  useUploadistaClient,
+} from "../hooks/use-uploadista-client";
+import { ExpoFileSystemProvider } from "../services/expo-file-system-provider";
+
+/**
+ * Props for the UploadistaProvider component.
+ * Combines client configuration options with React children.
+ *
+ * @property children - React components that will have access to the upload client context
+ * @property baseUrl - API base URL for uploads
+ * @property storageId - Default storage identifier
+ * @property chunkSize - Upload chunk size in bytes
+ * @property onEvent - Global event handler for all upload events
+ * @property ... - All other UploadistaClientOptions
+ */
+export interface UploadistaProviderProps extends UseUploadistaClientOptions {
+  /**
+   * Children components that will have access to the upload client
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * Context provider that provides uploadista client functionality to child components.
+ * This eliminates the need to pass upload client configuration down through props
+ * and ensures a single, shared upload client instance across your application.
+ *
+ * @param props - Upload client options and children
+ * @returns Provider component with upload client context
+ *
+ * @example
+ * ```tsx
+ * // Wrap your app with the upload provider
+ * function App() {
+ *   return (
+ *     <UploadistaProvider
+ *       baseUrl="https://api.example.com"
+ *       storageId="my-storage"
+ *       chunkSize={1024 * 1024} // 1MB chunks
+ *       onEvent={(event) => {
+ *         console.log('Global upload event:', event);
+ *       }}
+ *     >
+ *       <UploadInterface />
+ *     </UploadistaProvider>
+ *   );
+ * }
+ *
+ * // Use the upload client in any child component
+ * function UploadInterface() {
+ *   const uploadClient = useUploadistaContext();
+ *   const upload = useUpload(uploadClient);
+ *   const dragDrop = useDragDrop({
+ *     onFilesReceived: (files) => {
+ *       files.forEach(file => upload.upload(file));
+ *     }
+ *   });
+ *
+ *   return (
+ *     <div {...dragDrop.dragHandlers}>
+ *       <p>Drop files here to upload</p>
+ *       {upload.isUploading && <p>Progress: {upload.state.progress}%</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function UploadistaProvider({
+  children,
+  ...options
+}: UploadistaProviderProps) {
+  const eventSubscribersRef = useRef<Set<(event: UploadistaEvent) => void>>(
+    new Set(),
+  );
+
+  // Create file system provider instance (memoized to avoid recreation)
+  const fileSystemProvider = useMemo(() => new ExpoFileSystemProvider(), []);
+
+  // Wrap the original onEvent to broadcast to subscribers
+  const wrappedOnEvent = useCallback(
+    (event: UploadistaEvent) => {
+      console.log("[UploadistaProvider] Received event:", event);
+
+      // Call original handler if provided
+      options.onEvent?.(event);
+
+      // Broadcast to all subscribers
+      console.log(
+        "[UploadistaProvider] Broadcasting to",
+        eventSubscribersRef.current.size,
+        "subscribers",
+      );
+      eventSubscribersRef.current.forEach((handler) => {
+        try {
+          handler(event);
+        } catch (err) {
+          console.error("Error in event subscriber:", err);
+        }
+      });
+    },
+    [options.onEvent],
+  );
+
+  const uploadClient = useUploadistaClient({
+    ...options,
+    onEvent: wrappedOnEvent,
+  });
+
+  const subscribeToEvents = useCallback(
+    (handler: (event: UploadistaEvent) => void) => {
+      eventSubscribersRef.current.add(handler);
+      return () => {
+        eventSubscribersRef.current.delete(handler);
+      };
+    },
+    [],
+  );
+
+  // Memoize the context value to prevent unnecessary re-renders
+  const contextValue: UploadistaContextType = useMemo(
+    () => ({
+      ...uploadClient,
+      fileSystemProvider,
+      subscribeToEvents,
+      // Cast config to match react-native-core expectations (Expo options are compatible)
+      // biome-ignore lint/suspicious/noExplicitAny: Type compatibility between Expo and RN Core client options
+      config: uploadClient.config as any,
+    }),
+    [uploadClient, fileSystemProvider, subscribeToEvents],
+  );
+
+  return (
+    <UploadistaContext.Provider value={contextValue}>
+      {children}
+    </UploadistaContext.Provider>
+  );
+}
+
+/**
+ * Hook to access the uploadista client from the UploadistaProvider context.
+ * Must be used within an UploadistaProvider component.
+ *
+ * @returns Upload client instance from context including file system provider
+ * @throws Error if used outside of UploadistaProvider
+ *
+ * @example
+ * ```tsx
+ * function FileUploader() {
+ *   const uploadContext = useUploadistaContext();
+ *   const { client, fileSystemProvider } = uploadContext;
+ *
+ *   const handleFilePick = async () => {
+ *     try {
+ *       const result = await fileSystemProvider.pickDocument();
+ *       await client.upload(result.uri);
+ *     } catch (error) {
+ *       console.error('Upload failed:', error);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <button onClick={handleFilePick}>
+ *       Upload File
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useUploadistaContext(): UploadistaContextType {
+  const context = useContext(UploadistaContext);
+
+  if (context === undefined) {
+    throw new Error(
+      "useUploadistaContext must be used within an UploadistaProvider. " +
+        "Make sure to wrap your component tree with <UploadistaProvider>.",
+    );
+  }
+
+  return context;
+}

package/src/hooks/use-uploadista-client.ts

@@ -0,0 +1,147 @@
+import { useMemo, useRef } from "react";
+import {
+  createUploadistaClient,
+  type UploadistaClientOptions,
+} from "../client/create-uploadista-client";
+
+/**
+ * Configuration options for the uploadista client hook.
+ * Extends the base client options with React-specific behavior.
+ *
+ * @property onEvent - Global event handler for all upload and flow events
+ * @property baseUrl - API base URL for uploads
+ * @property storageId - Default storage identifier
+ * @property chunkSize - Size of upload chunks in bytes
+ * @property storeFingerprintForResuming - Enable resumable uploads
+ * @property retryDelays - Array of retry delays in milliseconds
+ * @property parallelUploads - Maximum number of parallel uploads
+ * @property uploadStrategy - Upload strategy (sequential, parallel, adaptive)
+ * @property smartChunking - Enable dynamic chunk size adjustment
+ * @property networkMonitoring - Enable network condition monitoring
+ * @property useAsyncStorage - Whether to use AsyncStorage for persistence (default: true)
+ */
+export interface UseUploadistaClientOptions extends UploadistaClientOptions {
+  /**
+   * Global event handler for all upload and flow events from this client
+   */
+  onEvent?: UploadistaClientOptions["onEvent"];
+}
+
+/**
+ * Return value from the useUploadistaClient hook.
+ *
+ * @property client - Configured uploadista client instance (stable across re-renders)
+ * @property config - Current client configuration options
+ */
+export interface UseUploadistaClientReturn {
+  /**
+   * The uploadista client instance
+   */
+  client: ReturnType<typeof createUploadistaClient>;
+
+  /**
+   * Current configuration of the client
+   */
+  config: UseUploadistaClientOptions;
+}
+
+/**
+ * React hook for creating and managing an uploadista client instance for Expo.
+ * The client instance is memoized and stable across re-renders, only being
+ * recreated when configuration options change.
+ *
+ * This hook is typically used internally by UploadistaProvider, but can be
+ * used directly for advanced use cases requiring multiple client instances.
+ *
+ * @param options - Upload client configuration options
+ * @returns Object containing the stable client instance and current configuration
+ *
+ * @example
+ * ```tsx
+ * // Basic client setup
+ * function MyUploadComponent() {
+ *   const { client, config } = useUploadistaClient({
+ *     baseUrl: 'https://api.example.com',
+ *     storageId: 'default-storage',
+ *     chunkSize: 1024 * 1024, // 1MB chunks
+ *     storeFingerprintForResuming: true,
+ *     useAsyncStorage: true, // Use AsyncStorage for persistence
+ *     onEvent: (event) => {
+ *       console.log('Upload event:', event);
+ *     }
+ *   });
+ *
+ *   // Use client directly
+ *   const handleUpload = async (uri: string) => {
+ *     await client.upload(uri, {
+ *       onSuccess: (result) => console.log('Uploaded:', result),
+ *       onError: (error) => console.error('Failed:', error),
+ *     });
+ *   };
+ *
+ *   return <FileUploader onUpload={handleUpload} />;
+ * }
+ *
+ * // Advanced: Multiple clients with different configurations
+ * function MultiClientComponent() {
+ *   // Client for image uploads
+ *   const imageClient = useUploadistaClient({
+ *     baseUrl: 'https://images.example.com',
+ *     storageId: 'images',
+ *     chunkSize: 2 * 1024 * 1024, // 2MB for images
+ *   });
+ *
+ *   // Client for document uploads
+ *   const docClient = useUploadistaClient({
+ *     baseUrl: 'https://docs.example.com',
+ *     storageId: 'documents',
+ *     chunkSize: 512 * 1024, // 512KB for documents
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <ImageUploader client={imageClient.client} />
+ *       <DocumentUploader client={docClient.client} />
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link UploadistaProvider} for the recommended way to provide client context
+ */
+export function useUploadistaClient(
+  options: UseUploadistaClientOptions,
+): UseUploadistaClientReturn {
+  // Store the options in a ref to enable stable dependency checking
+  const optionsRef = useRef<UseUploadistaClientOptions>(options);
+
+  // Update ref on each render but only create new client when essential deps change
+  optionsRef.current = options;
+
+  // Create client instance with stable identity
+  const client = useMemo(() => {
+    return createUploadistaClient({
+      baseUrl: options.baseUrl,
+      storageId: options.storageId,
+      uploadistaBasePath: options.uploadistaBasePath,
+      chunkSize: options.chunkSize,
+      storeFingerprintForResuming: options.storeFingerprintForResuming,
+      retryDelays: options.retryDelays,
+      parallelUploads: options.parallelUploads,
+      parallelChunkSize: options.parallelChunkSize,
+      uploadStrategy: options.uploadStrategy,
+      smartChunking: options.smartChunking,
+      networkMonitoring: options.networkMonitoring,
+      uploadMetrics: options.uploadMetrics,
+      connectionPooling: options.connectionPooling,
+      useAsyncStorage: options.useAsyncStorage,
+      auth: options.auth,
+      onEvent: options.onEvent,
+    });
+  }, [options]);
+
+  return {
+    client,
+    config: options,
+  };
+}

package/src/index.ts

@@ -50,11 +50,30 @@ export type {
   SliceResult,
   StorageService,
 } from "@uploadista/client-core";
+// Export Expo-specific types
+export type {
+  CameraOptions,
+  FileInfo,
+  FilePickResult,
+  FileSystemProvider,
+  PickerOptions,
+} from "@uploadista/react-native-core";
 // Export client factory
 export {
   createUploadistaClient,
   type UploadistaClientOptions,
 } from "./client";
+// Export provider and hooks
+export {
+  UploadistaProvider,
+  type UploadistaProviderProps,
+  useUploadistaContext,
+} from "./components/uploadista-provider";
+export {
+  type UseUploadistaClientOptions,
+  type UseUploadistaClientReturn,
+  useUploadistaClient,
+} from "./hooks/use-uploadista-client";
 // Re-export service implementations and factories
 export {
   createAsyncStorageService,
@@ -65,13 +84,4 @@ export {
   createExpoServices,
   type ExpoServiceOptions,
 } from "./services";
-
 export { ExpoFileSystemProvider } from "./services/expo-file-system-provider";
-// Export Expo-specific types
-export type {
-  CameraOptions,
-  FileInfo,
-  FilePickResult,
-  FileSystemProvider,
-  PickerOptions,
-} from "./types";

package/src/services/expo-file-system-provider.ts

@@ -1,13 +1,13 @@
-import * as DocumentPicker from "expo-document-picker";
-import * as FileSystem from "expo-file-system";
-import * as ImagePicker from "expo-image-picker";
 import type {
   CameraOptions,
   FileInfo,
   FilePickResult,
   FileSystemProvider,
   PickerOptions,
-} from "../types";
+} from "@uploadista/react-native-core";
+import * as DocumentPicker from "expo-document-picker";
+import * as FileSystem from "expo-file-system";
+import * as ImagePicker from "expo-image-picker";
 
 /**
  * File system provider implementation for Expo managed environment
@@ -30,27 +30,33 @@ export class ExpoFileSystemProvider implements FileSystemProvider {
       };
 
       if (result.canceled) {
-        throw new Error("Document picker was cancelled");
+        return { status: "cancelled" };
       }
 
       const asset = result.assets?.[0];
       if (!asset) {
-        throw new Error("No document selected");
+        return { status: "cancelled" };
       }
 
       return {
-        uri: asset.uri,
-        name: asset.name,
-        size: asset.size || 0,
-        mimeType: asset.mimeType,
+        status: "success",
+        data: {
+          uri: asset.uri,
+          name: asset.name,
+          size: asset.size || 0,
+          mimeType: asset.mimeType,
+        },
       };
     } catch (error) {
-      if (error instanceof Error && error.message.includes("cancelled")) {
-        throw error;
-      }
-      throw new Error(
-        `Failed to pick document: ${error instanceof Error ? error.message : String(error)}`,
-      );
+      return {
+        status: "error",
+        error:
+          error instanceof Error
+            ? error
+            : new Error(
+                `Failed to pick document: ${error instanceof Error ? error.message : String(error)}`,
+              ),
+      };
     }
   }
 
@@ -60,38 +66,46 @@ export class ExpoFileSystemProvider implements FileSystemProvider {
       const { status } =
         await ImagePicker.requestMediaLibraryPermissionsAsync();
       if (status !== "granted") {
-        throw new Error("Camera roll permission not granted");
+        return {
+          status: "error",
+          error: new Error("Camera roll permission not granted"),
+        };
       }
 
       const result = await ImagePicker.launchImageLibraryAsync({
-        // biome-ignore lint/suspicious/noExplicitAny: Expo ImagePicker mediaTypes type compatibility
-        mediaTypes: "Images" as any,
+        mediaTypes: "images",
         selectionLimit: options?.allowMultiple ? 0 : 1,
         quality: 1,
       });
 
       if (result.canceled) {
-        throw new Error("Image picker was cancelled");
+        return { status: "cancelled" };
       }
 
       const asset = result.assets?.[0];
       if (!asset) {
-        throw new Error("No image selected");
+        return { status: "cancelled" };
       }
 
       return {
-        uri: asset.uri,
-        name: asset.fileName || `image-${Date.now()}.jpg`,
-        size: asset.fileSize || 0,
-        mimeType: "image/jpeg",
+        status: "success",
+        data: {
+          uri: asset.uri,
+          name: asset.fileName || `image-${Date.now()}.jpg`,
+          size: asset.fileSize || 0,
+          mimeType: "image/jpeg",
+        },
       };
     } catch (error) {
-      if (error instanceof Error && error.message.includes("cancelled")) {
-        throw error;
-      }
-      throw new Error(
-        `Failed to pick image: ${error instanceof Error ? error.message : String(error)}`,
-      );
+      return {
+        status: "error",
+        error:
+          error instanceof Error
+            ? error
+            : new Error(
+                `Failed to pick image: ${error instanceof Error ? error.message : String(error)}`,
+              ),
+      };
     }
   }
 
@@ -101,37 +115,45 @@ export class ExpoFileSystemProvider implements FileSystemProvider {
       const { status } =
         await ImagePicker.requestMediaLibraryPermissionsAsync();
       if (status !== "granted") {
-        throw new Error("Camera roll permission not granted");
+        return {
+          status: "error",
+          error: new Error("Camera roll permission not granted"),
+        };
       }
 
       const result = await ImagePicker.launchImageLibraryAsync({
-        // biome-ignore lint/suspicious/noExplicitAny: Expo ImagePicker mediaTypes type compatibility
-        mediaTypes: "Videos" as any,
+        mediaTypes: "videos",
         selectionLimit: options?.allowMultiple ? 0 : 1,
       });
 
       if (result.canceled) {
-        throw new Error("Video picker was cancelled");
+        return { status: "cancelled" };
       }
 
       const asset = result.assets?.[0];
       if (!asset) {
-        throw new Error("No video selected");
+        return { status: "cancelled" };
       }
 
       return {
-        uri: asset.uri,
-        name: asset.fileName || `video-${Date.now()}.mp4`,
-        size: asset.fileSize || 0,
-        mimeType: "video/mp4",
+        status: "success",
+        data: {
+          uri: asset.uri,
+          name: asset.fileName || `video-${Date.now()}.mp4`,
+          size: asset.fileSize || 0,
+          mimeType: "video/mp4",
+        },
       };
     } catch (error) {
-      if (error instanceof Error && error.message.includes("cancelled")) {
-        throw error;
-      }
-      throw new Error(
-        `Failed to pick video: ${error instanceof Error ? error.message : String(error)}`,
-      );
+      return {
+        status: "error",
+        error:
+          error instanceof Error
+            ? error
+            : new Error(
+                `Failed to pick video: ${error instanceof Error ? error.message : String(error)}`,
+              ),
+      };
     }
   }
 
@@ -140,7 +162,10 @@ export class ExpoFileSystemProvider implements FileSystemProvider {
       // Request camera permissions
       const { status } = await ImagePicker.requestCameraPermissionsAsync();
       if (status !== "granted") {
-        throw new Error("Camera permission not granted");
+        return {
+          status: "error",
+          error: new Error("Camera permission not granted"),
+        };
       }
 
       const result = await ImagePicker.launchCameraAsync({
@@ -150,45 +175,44 @@ export class ExpoFileSystemProvider implements FileSystemProvider {
       });
 
       if (result.canceled) {
-        throw new Error("Camera capture was cancelled");
+        return { status: "cancelled" };
       }
 
       const asset = result.assets?.[0];
       if (!asset) {
-        throw new Error("No photo captured");
+        return { status: "cancelled" };
       }
 
       return {
-        uri: asset.uri,
-        name: asset.fileName || `photo-${Date.now()}.jpg`,
-        size: asset.fileSize || 0,
-        mimeType: "image/jpeg",
+        status: "success",
+        data: {
+          uri: asset.uri,
+          name: asset.fileName || `photo-${Date.now()}.jpg`,
+          size: asset.fileSize || 0,
+          mimeType: "image/jpeg",
+        },
       };
     } catch (error) {
-      if (error instanceof Error && error.message.includes("cancelled")) {
-        throw error;
-      }
-      throw new Error(
-        `Failed to capture photo: ${error instanceof Error ? error.message : String(error)}`,
-      );
+      return {
+        status: "error",
+        error:
+          error instanceof Error
+            ? error
+            : new Error(
+                `Failed to capture photo: ${error instanceof Error ? error.message : String(error)}`,
+              ),
+      };
     }
   }
 
   async readFile(uri: string): Promise<ArrayBuffer> {
     try {
-      // Read file as base64
-      const base64String = await FileSystem.readAsStringAsync(uri, {
-        encoding: FileSystem.EncodingType.Base64,
-      });
-
-      // Convert base64 to ArrayBuffer
-      // Use js-base64 for decoding since atob is not available in all RN environments
-      const { fromBase64 } = await import("js-base64");
-      const binaryString = fromBase64(base64String);
-      const bytes = new Uint8Array(binaryString.length);
-      for (let i = 0; i < binaryString.length; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
+      const file = new FileSystem.File(uri);
+      if (!file.exists) {
+        throw new Error("File does not exist");
       }
+      const bytes = await file.bytes();
+
       return bytes.buffer;
     } catch (error) {
       throw new Error(
@@ -204,18 +228,18 @@ export class ExpoFileSystemProvider implements FileSystemProvider {
 
   async getFileInfo(uri: string): Promise<FileInfo> {
     try {
-      const fileInfo = await FileSystem.getInfoAsync(uri);
+      const file = new FileSystem.File(uri);
 
-      if (!fileInfo.exists) {
+      if (!file.exists) {
         throw new Error("File does not exist");
       }
 
       return {
         uri,
         name: uri.split("/").pop() || "unknown",
-        size: fileInfo.size ?? 0,
-        modificationTime: fileInfo.modificationTime
-          ? fileInfo.modificationTime * 1000
+        size: file.size ?? 0,
+        modificationTime: file.modificationTime
+          ? file.modificationTime * 1000
           : undefined,
       };
     } catch (error) {

package/src/services/file-reader-service.ts

@@ -3,8 +3,8 @@ import type {
   FileSource,
   SliceResult,
 } from "@uploadista/client-core";
+// import { Blob } from "expo-blob";
 import type { ExpoUploadInput } from "@/types/upload-input";
-
 /**
  * Expo-specific implementation of FileReaderService
  * Handles Blob, File, and URI-based file inputs using Expo FileSystem APIs