@uploadista/react-native-core 0.0.3

package/src/components/UploadProgress.tsx

@@ -0,0 +1,196 @@
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import type { UploadState } from "../hooks/use-upload";
+import { formatFileSize } from "../utils";
+
+export interface UploadProgressProps {
+  /**  Upload state information */
+  state: UploadState;
+  /** Optional custom label */
+  label?: string;
+}
+
+/**
+ * Component to display upload progress with percentage, size, and speed
+ */
+export function UploadProgress({ state, label }: UploadProgressProps) {
+  const getStatusColor = () => {
+    switch (state.status) {
+      case "uploading":
+        return "#007AFF";
+      case "success":
+        return "#34C759";
+      case "error":
+      case "aborted":
+        return "#FF3B30";
+      default:
+        return "#999999";
+    }
+  };
+
+  const renderContent = () => {
+    switch (state.status) {
+      case "idle":
+        return (
+          <View style={styles.container}>
+            <Text style={styles.label}>{label || "Ready to upload"}</Text>
+          </View>
+        );
+
+      case "uploading":
+        return (
+          <View style={styles.container}>
+            <View style={styles.headerRow}>
+              <Text style={styles.label}>{label || "Uploading"}</Text>
+              <Text style={styles.percentage}>{state.progress}%</Text>
+            </View>
+
+            {/* Progress bar */}
+            <View style={styles.progressBarContainer}>
+              <View
+                style={[
+                  styles.progressBar,
+                  {
+                    width: `${state.progress}%`,
+                    backgroundColor: getStatusColor(),
+                  },
+                ]}
+              />
+            </View>
+
+            {/* Details row */}
+            <View style={styles.detailsRow}>
+              <Text style={styles.detail}>
+                {formatFileSize(state.bytesUploaded)} /{" "}
+                {formatFileSize(state.totalBytes || 0)}
+              </Text>
+            </View>
+          </View>
+        );
+
+      case "success":
+        return (
+          <View style={styles.container}>
+            <View style={styles.headerRow}>
+              <Text style={[styles.label, { color: getStatusColor() }]}>
+                {label || "Upload complete"}
+              </Text>
+              <Text style={[styles.percentage, { color: getStatusColor() }]}>
+                ✓
+              </Text>
+            </View>
+            <Text style={[styles.detail, { color: getStatusColor() }]}>
+              {formatFileSize(state.totalBytes || 0)}
+            </Text>
+          </View>
+        );
+
+      case "error":
+        return (
+          <View style={styles.container}>
+            <View style={styles.headerRow}>
+              <Text style={[styles.label, { color: getStatusColor() }]}>
+                {label || "Upload failed"}
+              </Text>
+              <Text style={[styles.percentage, { color: getStatusColor() }]}>
+                ✕
+              </Text>
+            </View>
+            {state.error && (
+              <Text style={[styles.detail, { color: getStatusColor() }]}>
+                {state.error.message}
+              </Text>
+            )}
+          </View>
+        );
+
+      case "aborted":
+        return (
+          <View style={styles.container}>
+            <Text style={[styles.label, { color: getStatusColor() }]}>
+              {label || "Upload cancelled"}
+            </Text>
+          </View>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          borderLeftColor: getStatusColor(),
+        },
+      ]}
+    >
+      {state.status === "uploading" && (
+        <ActivityIndicator
+          size="small"
+          color={getStatusColor()}
+          style={styles.spinner}
+        />
+      )}
+      {renderContent()}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderLeftWidth: 4,
+    backgroundColor: "#f5f5f5",
+    borderRadius: 4,
+    gap: 8,
+  },
+  spinner: {
+    marginTop: 4,
+  },
+  container: {
+    flex: 1,
+    gap: 4,
+  },
+  headerRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#333333",
+    flex: 1,
+  },
+  percentage: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#007AFF",
+    minWidth: 36,
+    textAlign: "right",
+  },
+  progressBarContainer: {
+    height: 4,
+    backgroundColor: "#e0e0e0",
+    borderRadius: 2,
+    overflow: "hidden",
+  },
+  progressBar: {
+    height: "100%",
+    borderRadius: 2,
+  },
+  detailsRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  detail: {
+    fontSize: 12,
+    color: "#666666",
+  },
+});

package/src/components/index.ts

@@ -0,0 +1,19 @@
+/**
+ * React Native UI Components for Uploadista
+ * Provides unstyled, customizable components for upload workflows
+ */
+
+export {
+  CameraUploadButton,
+  type CameraUploadButtonProps,
+} from "./CameraUploadButton";
+export {
+  FileUploadButton,
+  type FileUploadButtonProps,
+} from "./FileUploadButton";
+export {
+  GalleryUploadButton,
+  type GalleryUploadButtonProps,
+} from "./GalleryUploadButton";
+export { UploadList, type UploadListProps } from "./UploadList";
+export { UploadProgress, type UploadProgressProps } from "./UploadProgress";

package/src/hooks/index.ts

@@ -0,0 +1,29 @@
+// Core context and client
+export {
+  UploadistaContext,
+  type UploadistaContextType,
+} from "./uploadista-context";
+export { useCameraUpload } from "./use-camera-upload";
+export { useFileUpload } from "./use-file-upload";
+export { useFlowUpload } from "./use-flow-upload";
+export { useGalleryUpload } from "./use-gallery-upload";
+// Multi-upload hooks
+export type {
+  MultiUploadState,
+  UploadItemState,
+} from "./use-multi-upload";
+export { useMultiUpload } from "./use-multi-upload";
+// Upload hooks
+export type {
+  UploadState,
+  UploadStatus,
+  UseUploadOptions,
+  UseUploadReturn,
+} from "./use-upload";
+export { useUpload } from "./use-upload";
+export { useUploadMetrics } from "./use-upload-metrics";
+export type {
+  UseUploadistaClientOptions,
+  UseUploadistaClientReturn,
+} from "./use-uploadista-client";
+export { useUploadistaContext } from "./use-uploadista-context";

package/src/hooks/uploadista-context.ts

@@ -0,0 +1,17 @@
+import type { UploadistaEvent } from "@uploadista/client-core";
+import { createContext } from "react";
+import type { FileSystemProvider } from "../types";
+import type { UseUploadistaClientReturn } from "./use-uploadista-client";
+
+export interface UploadistaContextType extends UseUploadistaClientReturn {
+  fileSystemProvider: FileSystemProvider;
+  /**
+   * Subscribe to events (used internally by hooks)
+   * @internal
+   */
+  subscribeToEvents: (handler: (event: UploadistaEvent) => void) => () => void;
+}
+
+export const UploadistaContext = createContext<
+  UploadistaContextType | undefined
+>(undefined);

package/src/hooks/use-camera-upload.ts

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import type { UseCameraUploadOptions } from "../types";
+import { useUpload } from "./use-upload";
+import { useUploadistaContext } from "./use-uploadista-context";
+
+/**
+ * Hook for capturing photos and uploading them
+ * Handles camera permissions and capture flow
+ * @param options - Camera upload configuration
+ * @returns Upload state and camera capture/upload function
+ */
+export function useCameraUpload(options?: UseCameraUploadOptions) {
+  const { fileSystemProvider } = useUploadistaContext();
+  const uploadHook = useUpload({
+    metadata: options?.metadata,
+    onSuccess: options?.onSuccess,
+    onError: options?.onError,
+    onProgress: options?.onProgress,
+  });
+
+  // Capture and upload photo
+  const captureAndUpload = useCallback(async () => {
+    try {
+      // Capture photo with camera
+      const photo = await fileSystemProvider.pickCamera(options?.cameraOptions);
+
+      // Upload captured photo
+      await uploadHook.upload(photo);
+    } catch (error) {
+      console.error("Camera capture error:", error);
+    }
+  }, [fileSystemProvider, options?.cameraOptions, uploadHook]);
+
+  return {
+    ...uploadHook,
+    captureAndUpload,
+  };
+}

package/src/hooks/use-file-upload.ts

@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+import type { UseFileUploadOptions } from "../types";
+import { useUpload } from "./use-upload";
+import { useUploadistaContext } from "./use-uploadista-context";
+
+/**
+ * Hook for selecting and uploading generic files (documents, etc.)
+ * @param options - File upload configuration
+ * @returns Upload state and file picker/upload function
+ */
+export function useFileUpload(options?: UseFileUploadOptions) {
+  const { fileSystemProvider } = useUploadistaContext();
+  const uploadHook = useUpload({
+    metadata: options?.metadata,
+    onSuccess: options?.onSuccess,
+    onError: options?.onError,
+    onProgress: options?.onProgress,
+  });
+
+  // Pick and upload file
+  const pickAndUpload = useCallback(async () => {
+    try {
+      // Pick file
+      const file = await fileSystemProvider.pickDocument({
+        allowedTypes: options?.allowedTypes,
+      });
+
+      // Upload file
+      await uploadHook.upload(file);
+    } catch (error) {
+      console.error("File selection error:", error);
+      throw error;
+    }
+  }, [fileSystemProvider, options?.allowedTypes, uploadHook]);
+
+  return {
+    ...uploadHook,
+    pickAndUpload,
+  };
+}

package/src/hooks/use-flow-upload.ts

@@ -0,0 +1,242 @@
+import type { UploadFile } from "@uploadista/core/types";
+import { useCallback, useRef, useState } from "react";
+import type { FilePickResult, UseFlowUploadOptions } from "../types";
+import { useUploadistaContext } from "./use-uploadista-context";
+
+export type FlowUploadStatus =
+  | "idle"
+  | "uploading"
+  | "processing"
+  | "success"
+  | "error"
+  | "aborted";
+
+export interface FlowUploadState {
+  status: FlowUploadStatus;
+  progress: number;
+  bytesUploaded: number;
+  totalBytes: number | null;
+  jobId: string | null;
+  error: Error | null;
+  result: unknown | null;
+}
+
+const initialState: FlowUploadState = {
+  status: "idle",
+  progress: 0,
+  bytesUploaded: 0,
+  totalBytes: null,
+  jobId: null,
+  error: null,
+  result: null,
+};
+
+/**
+ * Hook for uploading files through a flow pipeline with full state management.
+ * Provides upload progress tracking, flow execution monitoring, error handling, and abort functionality.
+ *
+ * Must be used within an UploadistaProvider.
+ *
+ * @param options - Flow upload configuration
+ * @returns Flow upload state and control methods
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const flowUpload = useFlowUpload({
+ *     flowId: 'image-processing-flow',
+ *     storageId: 'my-storage',
+ *     onSuccess: (result) => console.log('Flow complete:', result),
+ *     onError: (error) => console.error('Flow failed:', error),
+ *     onProgress: (progress) => console.log('Progress:', progress + '%'),
+ *   });
+ *
+ *   const handlePickFile = async () => {
+ *     const file = await fileSystemProvider.pickDocument();
+ *     if (file) {
+ *       await flowUpload.upload(file);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <View>
+ *       <Button title="Pick File" onPress={handlePickFile} />
+ *       {flowUpload.isUploading && <Text>Progress: {flowUpload.state.progress}%</Text>}
+ *       {flowUpload.state.jobId && <Text>Job ID: {flowUpload.state.jobId}</Text>}
+ *       {flowUpload.state.error && <Text>Error: {flowUpload.state.error.message}</Text>}
+ *       <Button title="Abort" onPress={flowUpload.abort} disabled={!flowUpload.isActive} />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useFlowUpload(options: UseFlowUploadOptions) {
+  const { client, fileSystemProvider } = useUploadistaContext();
+  const [state, setState] = useState<FlowUploadState>(initialState);
+  const abortControllerRef = useRef<{ abort: () => void } | null>(null);
+  const lastFileRef = useRef<FilePickResult | null>(null);
+
+  const updateState = useCallback((update: Partial<FlowUploadState>) => {
+    setState((prev) => ({ ...prev, ...update }));
+  }, []);
+
+  const reset = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    setState(initialState);
+    lastFileRef.current = null;
+  }, []);
+
+  const abort = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+
+    updateState({
+      status: "aborted",
+    });
+  }, [updateState]);
+
+  const upload = useCallback(
+    async (file: FilePickResult) => {
+      // Reset any previous state
+      setState({
+        ...initialState,
+        status: "uploading",
+        totalBytes: file.size,
+      });
+
+      lastFileRef.current = file;
+
+      try {
+        // Read file content
+        const fileContent = await fileSystemProvider.readFile(file.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], {
+          type: file.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 flow upload using the client
+        const uploadPromise = client.uploadWithFlow(
+          uploadInput,
+          {
+            flowId: options.flowId,
+            storageId: options.storageId,
+            outputNodeId: options.outputNodeId,
+            metadata: options.metadata as Record<string, string> | undefined,
+          },
+          {
+            onJobStart: () => {
+              updateState({
+                status: "processing",
+              });
+            },
+
+            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;
+            },
+          },
+        );
+
+        // 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;
+      }
+    },
+    [client, fileSystemProvider, options, updateState],
+  );
+
+  const retry = useCallback(() => {
+    if (
+      lastFileRef.current &&
+      (state.status === "error" || state.status === "aborted")
+    ) {
+      upload(lastFileRef.current);
+    }
+  }, [upload, state.status]);
+
+  const isActive =
+    state.status === "uploading" || state.status === "processing";
+  const canRetry =
+    (state.status === "error" || state.status === "aborted") &&
+    lastFileRef.current !== null;
+
+  return {
+    state,
+    upload,
+    abort,
+    reset,
+    retry,
+    isActive,
+    canRetry,
+  };
+}

package/src/hooks/use-gallery-upload.ts

@@ -0,0 +1,65 @@
+import { useCallback } from "react";
+import type { FilePickResult, UseGalleryUploadOptions } from "../types";
+import { useMultiUpload } from "./use-multi-upload";
+import { useUploadistaContext } from "./use-uploadista-context";
+
+/**
+ * Hook for selecting and uploading photos/videos from gallery
+ * Handles batch selection and concurrent uploads
+ * @param options - Gallery upload configuration
+ * @returns Upload state and gallery selection/upload function
+ */
+export function useGalleryUpload(options?: UseGalleryUploadOptions) {
+  const { fileSystemProvider } = useUploadistaContext();
+  const uploadHook = useMultiUpload({
+    maxConcurrent: 3,
+    metadata: options?.metadata,
+    onSuccess: options?.onSuccess,
+    onError: options?.onError,
+  });
+
+  // Select and upload media from gallery
+  const selectAndUpload = useCallback(async () => {
+    try {
+      let media: FilePickResult | FilePickResult[];
+
+      // Select appropriate media type
+      if (options?.mediaType === "video") {
+        media = await fileSystemProvider.pickVideo({
+          allowMultiple: options?.allowMultiple ?? true,
+        });
+      } else if (options?.mediaType === "photo") {
+        media = await fileSystemProvider.pickImage({
+          allowMultiple: options?.allowMultiple ?? true,
+        });
+      } else {
+        // For 'mixed' or default, use pickImage first (can be extended to support both)
+        media = await fileSystemProvider.pickImage({
+          allowMultiple: options?.allowMultiple ?? true,
+        });
+      }
+
+      // Handle single or multiple files
+      const files = Array.isArray(media) ? media : [media];
+
+      // Add files and start upload
+      const itemIds = uploadHook.addFiles(files);
+      await uploadHook.startUploads();
+
+      return itemIds;
+    } catch (error) {
+      console.error("Gallery selection error:", error);
+      throw error;
+    }
+  }, [
+    fileSystemProvider,
+    options?.allowMultiple,
+    options?.mediaType,
+    uploadHook,
+  ]);
+
+  return {
+    ...uploadHook,
+    selectAndUpload,
+  };
+}