@uploadbox/react 0.1.0

package/src/use-uploadbox.ts

@@ -0,0 +1,333 @@
+"use client";
+
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import type { FileRouter, RouterConfig } from "@uploadbox/core";
+import type {
+  UseUploadboxOpts,
+  UseUploadboxReturn,
+  UploadedFile,
+  FileProgress,
+  EnhancedUploadProgressEvent,
+} from "./types.js";
+import { ProgressTracker } from "./progress-tracker.js";
+import { withRetry, DEFAULT_RETRY_CONFIG } from "./retry.js";
+import { shouldUseMultipart, uploadFileMultipart } from "./multipart.js";
+import { useUploadboxConfig } from "./provider.js";
+
+const DEFAULT_API_URL = "/api/uploadbox";
+
+function buildHeaders(
+  providerHeaders?: Record<string, string>,
+  providerApiKey?: string,
+  optHeaders?: Record<string, string>
+): Record<string, string> {
+  const merged: Record<string, string> = {};
+  if (providerHeaders) Object.assign(merged, providerHeaders);
+  if (providerApiKey) merged["Authorization"] = `Bearer ${providerApiKey}`;
+  if (optHeaders) Object.assign(merged, optHeaders);
+  return merged;
+}
+
+async function fetchRouterConfig(apiUrl: string, headers?: Record<string, string>): Promise<RouterConfig> {
+  const res = await fetch(apiUrl, { headers });
+  if (!res.ok) throw new Error("Failed to fetch router config");
+  return res.json();
+}
+
+async function requestPresignedUrls(
+  apiUrl: string,
+  routeKey: string,
+  files: { name: string; size: number; type: string; customMetadata?: Record<string, string>; ttlSeconds?: number }[],
+  headers?: Record<string, string>
+): Promise<{ uploadId: string; key: string; url: string; name: string; size: number; type: string }[]> {
+  const res = await fetch(apiUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", ...headers },
+    body: JSON.stringify({ action: "upload", routeKey, files }),
+  });
+  if (!res.ok) {
+    const err = await res.json();
+    throw new Error(err.message || "Failed to get upload URLs");
+  }
+  return res.json();
+}
+
+async function confirmUploads(
+  apiUrl: string,
+  routeKey: string,
+  keys: string[],
+  headers?: Record<string, string>
+): Promise<any[]> {
+  const res = await fetch(apiUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", ...headers },
+    body: JSON.stringify({ action: "complete", routeKey, keys }),
+  });
+  if (!res.ok) {
+    const err = await res.json();
+    throw new Error(err.message || "Failed to confirm uploads");
+  }
+  return res.json();
+}
+
+function uploadFileWithProgress(
+  url: string,
+  file: File,
+  contentType: string,
+  onProgress?: (loaded: number) => void,
+  signal?: AbortSignal
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("PUT", url);
+    xhr.setRequestHeader("Content-Type", contentType);
+
+    if (signal) {
+      signal.addEventListener("abort", () => xhr.abort(), { once: true });
+    }
+
+    xhr.upload.addEventListener("progress", (event) => {
+      if (event.lengthComputable) {
+        onProgress?.(event.loaded);
+      }
+    });
+
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve();
+      } else {
+        reject(new Error(`Upload failed with status ${xhr.status}`));
+      }
+    });
+
+    xhr.addEventListener("error", () => reject(new Error("Upload failed")));
+    xhr.addEventListener("abort", () => reject(new Error("Upload aborted")));
+
+    xhr.send(file);
+  });
+}
+
+export function useUploadbox<
+  TRouter extends FileRouter,
+  TEndpoint extends keyof TRouter & string
+>(
+  endpoint: TEndpoint,
+  opts?: Omit<UseUploadboxOpts<TRouter, TEndpoint>, "endpoint">
+): UseUploadboxReturn {
+  const providerConfig = useUploadboxConfig();
+  const apiUrl = providerConfig.apiUrl ?? DEFAULT_API_URL;
+  const mergedHeaders = useMemo(
+    () => buildHeaders(providerConfig.headers, providerConfig.apiKey, opts?.headers),
+    [providerConfig.headers, providerConfig.apiKey, opts?.headers]
+  );
+
+  const [isUploading, setIsUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [fileProgress, setFileProgress] = useState<FileProgress[]>([]);
+  const [routeConfig, setRouteConfig] = useState<RouterConfig[string] | undefined>();
+
+  const trackerRef = useRef(new ProgressTracker());
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    fetchRouterConfig(apiUrl, mergedHeaders).then((config) => {
+      setRouteConfig(config[endpoint]);
+    }).catch(console.error);
+  }, [endpoint, apiUrl, mergedHeaders]);
+
+  const abort = useCallback(() => {
+    abortControllerRef.current?.abort();
+  }, []);
+
+  const startUpload = useCallback(
+    async (inputFiles: File[]): Promise<UploadedFile[] | undefined> => {
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      const tracker = trackerRef.current;
+      tracker.reset();
+
+      try {
+        setIsUploading(true);
+        setProgress(0);
+
+        let filesToUpload = inputFiles;
+        if (opts?.onBeforeUploadBegin) {
+          filesToUpload = opts.onBeforeUploadBegin(filesToUpload);
+        }
+
+        // Initialize progress tracker
+        filesToUpload.forEach((f, i) => {
+          tracker.init(String(i), f.name, f.size, f.type || "application/octet-stream");
+        });
+
+        // 1. Build file infos with metadata
+        const fileInfos = filesToUpload.map((f) => ({
+          name: f.name,
+          size: f.size,
+          type: f.type || "application/octet-stream",
+          ...(opts?.getFileMetadata ? { customMetadata: opts.getFileMetadata(f) } : {}),
+          ...(opts?.ttlSeconds != null ? { ttlSeconds: opts.ttlSeconds } : {}),
+        }));
+
+        // Split into small files (single-part) and large files (multipart)
+        const smallFileIndices: number[] = [];
+        const largeFileIndices: number[] = [];
+
+        filesToUpload.forEach((f, i) => {
+          if (shouldUseMultipart(f.size)) {
+            largeFileIndices.push(i);
+          } else {
+            smallFileIndices.push(i);
+          }
+        });
+
+        // 2. Request presigned URLs for small files
+        const smallFileInfos = smallFileIndices.map((i) => fileInfos[i]!);
+        let presignedResults: { uploadId: string; key: string; url: string; name: string; size: number; type: string }[] = [];
+
+        if (smallFileInfos.length > 0) {
+          presignedResults = await requestPresignedUrls(apiUrl, endpoint, smallFileInfos, mergedHeaders);
+        }
+
+        const retryConfig = opts?.retry === false ? undefined : (opts?.retry ?? DEFAULT_RETRY_CONFIG);
+
+        // Helper to emit progress
+        const emitProgress = () => {
+          const snapshot = tracker.getSnapshot();
+          setProgress(snapshot.percent);
+          setFileProgress(snapshot.fileProgress);
+          opts?.onUploadProgress?.(snapshot);
+        };
+
+        // 3. Upload small files with retry
+        const smallUploadPromises = presignedResults.map((result, idx) => {
+          const fileIndex = smallFileIndices[idx]!;
+          const file = filesToUpload[fileIndex]!;
+          const fileId = String(fileIndex);
+
+          tracker.setKey(fileId, result.key);
+          tracker.setStatus(fileId, "uploading");
+
+          const doUpload = async () => {
+            await uploadFileWithProgress(
+              result.url,
+              file,
+              file.type || "application/octet-stream",
+              (loaded) => {
+                tracker.updateProgress(fileId, loaded);
+                emitProgress();
+              },
+              abortController.signal
+            );
+          };
+
+          if (retryConfig) {
+            return withRetry(
+              () => doUpload(),
+              retryConfig,
+              (attempt) => {
+                tracker.incrementRetry(fileId);
+                emitProgress();
+              },
+              abortController.signal
+            ).then(() => {
+              tracker.setStatus(fileId, "complete");
+              emitProgress();
+            });
+          }
+
+          return doUpload().then(() => {
+            tracker.setStatus(fileId, "complete");
+            emitProgress();
+          });
+        });
+
+        // 4. Upload large files via multipart
+        const largeUploadPromises = largeFileIndices.map(async (fileIndex) => {
+          const file = filesToUpload[fileIndex]!;
+          const fileId = String(fileIndex);
+          const info = fileInfos[fileIndex]!;
+
+          tracker.setStatus(fileId, "uploading");
+
+          const result = await uploadFileMultipart({
+            file,
+            routeKey: endpoint,
+            fileInfo: info,
+            apiUrl,
+            headers: mergedHeaders,
+            retryConfig: retryConfig ?? undefined,
+            signal: abortController.signal,
+            onProgress: (loaded) => {
+              tracker.updateProgress(fileId, loaded);
+              emitProgress();
+            },
+            onRetry: () => {
+              tracker.incrementRetry(fileId);
+              emitProgress();
+            },
+          });
+
+          tracker.setKey(fileId, result.key);
+          tracker.setStatus(fileId, "complete");
+          emitProgress();
+
+          return result;
+        });
+
+        // Wait for all uploads
+        await Promise.all([...smallUploadPromises, ...largeUploadPromises]);
+
+        // 5. Confirm small file uploads
+        const smallKeys = presignedResults.map((r) => r.key);
+        let allResults: any[] = [];
+
+        if (smallKeys.length > 0) {
+          const smallConfirm = await confirmUploads(apiUrl, endpoint, smallKeys, mergedHeaders);
+          allResults.push(...smallConfirm);
+        }
+
+        // Large file results are already confirmed server-side during multipart complete
+        // Add their results too
+        for (const idx of largeFileIndices) {
+          const fileId = String(idx);
+          const fp = tracker.getSnapshot().fileProgress.find((f) => f.fileId === fileId);
+          if (fp?.key) {
+            allResults.push({
+              file: {
+                key: fp.key,
+                name: fp.name,
+                size: fp.size,
+                type: fp.type,
+                url: "", // URL will come from confirm
+              },
+            });
+          }
+        }
+
+        const uploadedFiles: UploadedFile[] = allResults.map((r) => ({
+          key: r.file.key,
+          name: r.file.name,
+          size: r.file.size,
+          type: r.file.type,
+          url: r.file.url,
+          customMetadata: r.file.customMetadata,
+        }));
+
+        setProgress(100);
+        opts?.onClientUploadComplete?.(uploadedFiles);
+        return uploadedFiles;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error("Upload failed");
+        opts?.onUploadError?.(error);
+        return undefined;
+      } finally {
+        setIsUploading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [apiUrl, endpoint, mergedHeaders, opts]
+  );
+
+  return { startUpload, isUploading, progress, routeConfig, fileProgress, abort };
+}