@uploadista/react 0.0.3

package/src/components/uploadista-provider.tsx

@@ -0,0 +1,190 @@
+"use client";
+import type { UploadistaEvent } from "@uploadista/client-browser";
+import type React from "react";
+import { createContext, useCallback, useContext, useMemo, useRef } from "react";
+import {
+  type UseUploadistaClientOptions,
+  type UseUploadistaClientReturn,
+  useUploadistaClient,
+} from "../hooks/use-uploadista-client";
+
+/**
+ * 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;
+}
+
+type UploadistaContextValue = UseUploadistaClientReturn & {
+  /**
+   * Subscribe to events (used internally by hooks)
+   * @internal
+   */
+  subscribeToEvents: (handler: (event: UploadistaEvent) => void) => () => void;
+};
+
+const UploadistaContext = createContext<UploadistaContextValue | null>(null);
+
+/**
+ * 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(),
+  );
+
+  // 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 = useMemo(
+    () => ({
+      ...uploadClient,
+      subscribeToEvents,
+    }),
+    [uploadClient, 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
+ * @throws Error if used outside of UploadistaProvider
+ *
+ * @example
+ * ```tsx
+ * function FileUploader() {
+ *   const uploadClient = useUploadistaContext();
+ *   const upload = useUpload(uploadClient);
+ *
+ *   return (
+ *     <button
+ *       onClick={() => {
+ *         const input = document.createElement('input');
+ *         input.type = 'file';
+ *         input.onchange = (e) => {
+ *           const file = (e.target as HTMLInputElement).files?.[0];
+ *           if (file) upload.upload(file);
+ *         };
+ *         input.click();
+ *       }}
+ *     >
+ *       Upload File
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export function useUploadistaContext(): UploadistaContextValue {
+  const context = useContext(UploadistaContext);
+
+  if (context === null) {
+    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-drag-drop.ts

@@ -0,0 +1,404 @@
+import { useCallback, useRef, useState } from "react";
+
+export interface DragDropOptions {
+  /**
+   * Accept specific file types (MIME types or file extensions)
+   */
+  accept?: string[];
+
+  /**
+   * Maximum number of files allowed
+   */
+  maxFiles?: number;
+
+  /**
+   * Maximum file size in bytes
+   */
+  maxFileSize?: number;
+
+  /**
+   * Whether to allow multiple files
+   */
+  multiple?: boolean;
+
+  /**
+   * Custom validation function for files
+   */
+  validator?: (files: File[]) => string[] | null;
+
+  /**
+   * Called when files are dropped or selected
+   */
+  onFilesReceived?: (files: File[]) => void;
+
+  /**
+   * Called when validation fails
+   */
+  onValidationError?: (errors: string[]) => void;
+
+  /**
+   * Called when drag state changes
+   */
+  onDragStateChange?: (isDragging: boolean) => void;
+}
+
+export interface DragDropState {
+  /**
+   * Whether files are currently being dragged over the drop zone
+   */
+  isDragging: boolean;
+
+  /**
+   * Whether the drag is currently over the drop zone
+   */
+  isOver: boolean;
+
+  /**
+   * Whether the dragged items are valid files
+   */
+  isValid: boolean;
+
+  /**
+   * Current validation errors
+   */
+  errors: string[];
+}
+
+export interface UseDragDropReturn {
+  /**
+   * Current drag and drop state
+   */
+  state: DragDropState;
+
+  /**
+   * Event handlers for the drop zone element
+   */
+  dragHandlers: {
+    onDragEnter: (event: React.DragEvent) => void;
+    onDragOver: (event: React.DragEvent) => void;
+    onDragLeave: (event: React.DragEvent) => void;
+    onDrop: (event: React.DragEvent) => void;
+  };
+
+  /**
+   * Props for a file input element
+   */
+  inputProps: {
+    type: "file";
+    multiple: boolean;
+    accept?: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    style: { display: "none" };
+  };
+
+  /**
+   * Open file picker dialog
+   */
+  openFilePicker: () => void;
+
+  /**
+   * Manually process files (useful for programmatic file handling)
+   */
+  processFiles: (files: File[]) => void;
+
+  /**
+   * Reset drag state
+   */
+  reset: () => void;
+}
+
+const initialState: DragDropState = {
+  isDragging: false,
+  isOver: false,
+  isValid: true,
+  errors: [],
+};
+
+/**
+ * React hook for handling drag and drop file uploads with validation.
+ * Provides drag state management, file validation, and file picker integration.
+ *
+ * @param options - Configuration and event handlers
+ * @returns Drag and drop state and handlers
+ *
+ * @example
+ * ```tsx
+ * const dragDrop = useDragDrop({
+ *   accept: ['image/*', '.pdf'],
+ *   maxFiles: 5,
+ *   maxFileSize: 10 * 1024 * 1024, // 10MB
+ *   multiple: true,
+ *   onFilesReceived: (files) => {
+ *     console.log('Received files:', files);
+ *     // Process files with upload hooks
+ *   },
+ *   onValidationError: (errors) => {
+ *     console.error('Validation errors:', errors);
+ *   },
+ * });
+ *
+ * return (
+ *   <div>
+ *     <div
+ *       {...dragDrop.dragHandlers}
+ *       style={{
+ *         border: dragDrop.state.isDragging ? '2px dashed #007bff' : '2px dashed #ccc',
+ *         backgroundColor: dragDrop.state.isOver ? '#f8f9fa' : 'transparent',
+ *         padding: '2rem',
+ *         textAlign: 'center',
+ *         cursor: 'pointer',
+ *       }}
+ *       onClick={dragDrop.openFilePicker}
+ *     >
+ *       {dragDrop.state.isDragging ? (
+ *         <p>Drop files here...</p>
+ *       ) : (
+ *         <p>Drag files here or click to select</p>
+ *       )}
+ *
+ *       {dragDrop.state.errors.length > 0 && (
+ *         <div style={{ color: 'red', marginTop: '1rem' }}>
+ *           {dragDrop.state.errors.map((error, index) => (
+ *             <p key={index}>{error}</p>
+ *           ))}
+ *         </div>
+ *       )}
+ *     </div>
+ *
+ *     <input {...dragDrop.inputProps} />
+ *   </div>
+ * );
+ * ```
+ */
+export function useDragDrop(options: DragDropOptions = {}): UseDragDropReturn {
+  const {
+    accept,
+    maxFiles,
+    maxFileSize,
+    multiple = true,
+    validator,
+    onFilesReceived,
+    onValidationError,
+    onDragStateChange,
+  } = options;
+
+  const [state, setState] = useState<DragDropState>(initialState);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dragCounterRef = useRef(0);
+
+  const updateState = useCallback((update: Partial<DragDropState>) => {
+    setState((prev) => ({ ...prev, ...update }));
+  }, []);
+
+  const validateFiles = useCallback(
+    (files: File[]): string[] => {
+      const errors: string[] = [];
+
+      // Check file count
+      if (maxFiles && files.length > maxFiles) {
+        errors.push(
+          `Maximum ${maxFiles} files allowed. You selected ${files.length} files.`,
+        );
+      }
+
+      // Check individual files
+      for (const file of files) {
+        // Check file size
+        if (maxFileSize && file.size > maxFileSize) {
+          const maxSizeMB = (maxFileSize / (1024 * 1024)).toFixed(1);
+          const fileSizeMB = (file.size / (1024 * 1024)).toFixed(1);
+          errors.push(
+            `File "${file.name}" (${fileSizeMB}MB) exceeds maximum size of ${maxSizeMB}MB.`,
+          );
+        }
+
+        // Check file type
+        if (accept && accept.length > 0) {
+          const isAccepted = accept.some((acceptType) => {
+            if (acceptType.startsWith(".")) {
+              // File extension check
+              return file.name.toLowerCase().endsWith(acceptType.toLowerCase());
+            } else {
+              // MIME type check (supports wildcards like image/*)
+              if (acceptType.endsWith("/*")) {
+                const baseType = acceptType.slice(0, -2);
+                return file.type.startsWith(baseType);
+              } else {
+                return file.type === acceptType;
+              }
+            }
+          });
+
+          if (!isAccepted) {
+            errors.push(
+              `File "${file.name}" type "${file.type}" is not accepted. Accepted types: ${accept.join(", ")}.`,
+            );
+          }
+        }
+      }
+
+      // Run custom validator
+      if (validator) {
+        const customErrors = validator(files);
+        if (customErrors) {
+          errors.push(...customErrors);
+        }
+      }
+
+      return errors;
+    },
+    [accept, maxFiles, maxFileSize, validator],
+  );
+
+  const processFiles = useCallback(
+    (files: File[]) => {
+      const fileArray = Array.from(files);
+      const errors = validateFiles(fileArray);
+
+      if (errors.length > 0) {
+        updateState({ errors, isValid: false });
+        onValidationError?.(errors);
+      } else {
+        updateState({ errors: [], isValid: true });
+        onFilesReceived?.(fileArray);
+      }
+    },
+    [validateFiles, updateState, onFilesReceived, onValidationError],
+  );
+
+  const getFilesFromDataTransfer = useCallback(
+    (dataTransfer: DataTransfer): File[] => {
+      const files: File[] = [];
+
+      if (dataTransfer.items) {
+        // Use DataTransferItemList interface
+        for (let i = 0; i < dataTransfer.items.length; i++) {
+          const item = dataTransfer.items[i];
+          if (item && item.kind === "file") {
+            const file = item.getAsFile();
+            if (file) {
+              files.push(file);
+            }
+          }
+        }
+      } else {
+        // Fallback to DataTransfer.files
+        for (let i = 0; i < dataTransfer.files.length; i++) {
+          const file = dataTransfer.files[i];
+          if (file) {
+            files.push(file);
+          }
+        }
+      }
+
+      return files;
+    },
+    [],
+  );
+
+  const onDragEnter = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      dragCounterRef.current++;
+
+      if (dragCounterRef.current === 1) {
+        updateState({ isDragging: true, isOver: true });
+        onDragStateChange?.(true);
+      }
+    },
+    [updateState, onDragStateChange],
+  );
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Set dropEffect to indicate what operation is allowed
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "copy";
+    }
+  }, []);
+
+  const onDragLeave = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      dragCounterRef.current--;
+
+      if (dragCounterRef.current === 0) {
+        updateState({ isDragging: false, isOver: false, errors: [] });
+        onDragStateChange?.(false);
+      }
+    },
+    [updateState, onDragStateChange],
+  );
+
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      dragCounterRef.current = 0;
+      updateState({ isDragging: false, isOver: false });
+      onDragStateChange?.(false);
+
+      if (event.dataTransfer) {
+        const files = getFilesFromDataTransfer(event.dataTransfer);
+        if (files.length > 0) {
+          processFiles(files);
+        }
+      }
+    },
+    [updateState, onDragStateChange, getFilesFromDataTransfer, processFiles],
+  );
+
+  const openFilePicker = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+
+  const onInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (event.target.files && event.target.files.length > 0) {
+        const files = Array.from(event.target.files);
+        processFiles(files);
+      }
+
+      // Reset input value to allow selecting the same files again
+      event.target.value = "";
+    },
+    [processFiles],
+  );
+
+  const reset = useCallback(() => {
+    setState(initialState);
+    dragCounterRef.current = 0;
+  }, []);
+
+  const dragHandlers = {
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+  };
+
+  const inputProps = {
+    type: "file" as const,
+    multiple,
+    accept: accept?.join(", "),
+    onChange: onInputChange,
+    style: { display: "none" as const },
+    ref: inputRef,
+  };
+
+  return {
+    state,
+    dragHandlers,
+    inputProps,
+    openFilePicker,
+    processFiles,
+    reset,
+  };
+}