@uploadbox/react 0.1.0

package/src/progress-tracker.ts

@@ -0,0 +1,107 @@
+import type { FileProgress, FileUploadStatus, EnhancedUploadProgressEvent } from "./types.js";
+
+interface SpeedSample {
+  timestamp: number;
+  loaded: number;
+}
+
+const SPEED_WINDOW_MS = 3000;
+
+export class ProgressTracker {
+  private files = new Map<string, FileProgress>();
+  private speedSamples = new Map<string, SpeedSample[]>();
+
+  init(fileId: string, name: string, size: number, type: string): void {
+    this.files.set(fileId, {
+      fileId,
+      name,
+      size,
+      type,
+      status: "pending",
+      loaded: 0,
+      percent: 0,
+      speed: 0,
+      eta: 0,
+      retryCount: 0,
+    });
+    this.speedSamples.set(fileId, []);
+  }
+
+  updateProgress(fileId: string, loaded: number): void {
+    const file = this.files.get(fileId);
+    if (!file) return;
+
+    file.loaded = loaded;
+    file.percent = file.size > 0 ? Math.round((loaded / file.size) * 100) : 0;
+    file.status = "uploading";
+
+    // Update speed samples
+    const samples = this.speedSamples.get(fileId) ?? [];
+    const now = Date.now();
+    samples.push({ timestamp: now, loaded });
+
+    // Prune old samples
+    const cutoff = now - SPEED_WINDOW_MS;
+    const validSamples = samples.filter((s) => s.timestamp >= cutoff);
+    this.speedSamples.set(fileId, validSamples);
+
+    // Calculate speed from sliding window
+    if (validSamples.length >= 2) {
+      const oldest = validSamples[0]!;
+      const newest = validSamples[validSamples.length - 1]!;
+      const timeDiff = (newest.timestamp - oldest.timestamp) / 1000;
+      if (timeDiff > 0) {
+        file.speed = (newest.loaded - oldest.loaded) / timeDiff;
+        const remaining = file.size - loaded;
+        file.eta = file.speed > 0 ? remaining / file.speed : 0;
+      }
+    }
+  }
+
+  setStatus(fileId: string, status: FileUploadStatus, error?: string): void {
+    const file = this.files.get(fileId);
+    if (!file) return;
+    file.status = status;
+    if (error) file.error = error;
+    if (status === "complete") {
+      file.loaded = file.size;
+      file.percent = 100;
+      file.eta = 0;
+    }
+  }
+
+  setKey(fileId: string, key: string): void {
+    const file = this.files.get(fileId);
+    if (file) file.key = key;
+  }
+
+  incrementRetry(fileId: string): void {
+    const file = this.files.get(fileId);
+    if (!file) return;
+    file.retryCount++;
+    file.status = "retrying";
+    file.loaded = 0;
+    file.percent = 0;
+    file.speed = 0;
+    file.eta = 0;
+    this.speedSamples.set(fileId, []);
+  }
+
+  getSnapshot(): EnhancedUploadProgressEvent {
+    const allFiles = Array.from(this.files.values());
+    const totalSize = allFiles.reduce((sum, f) => sum + f.size, 0);
+    const totalLoaded = allFiles.reduce((sum, f) => sum + f.loaded, 0);
+
+    return {
+      loaded: totalLoaded,
+      total: totalSize,
+      percent: totalSize > 0 ? Math.round((totalLoaded / totalSize) * 100) : 0,
+      fileProgress: allFiles.map((f) => ({ ...f })),
+    };
+  }
+
+  reset(): void {
+    this.files.clear();
+    this.speedSamples.clear();
+  }
+}

package/src/provider.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import React, { createContext, useContext, useMemo } from "react";
+
+export interface UploadboxContextValue {
+  /** Base URL for the upload API. Defaults to "/api/uploadbox". */
+  apiUrl?: string;
+  /** API key for hosted mode — sent as Authorization: Bearer. */
+  apiKey?: string;
+  /** Extra headers to include with every request. */
+  headers?: Record<string, string>;
+}
+
+const UploadboxContext = createContext<UploadboxContextValue>({});
+
+export function UploadboxProvider({
+  children,
+  ...config
+}: UploadboxContextValue & { children: React.ReactNode }) {
+  const value = useMemo(
+    () => ({ apiUrl: config.apiUrl, apiKey: config.apiKey, headers: config.headers }),
+    [config.apiUrl, config.apiKey, config.headers]
+  );
+
+  return (
+    <UploadboxContext.Provider value={value}>
+      {children}
+    </UploadboxContext.Provider>
+  );
+}
+
+export function useUploadboxConfig(): UploadboxContextValue {
+  return useContext(UploadboxContext);
+}

package/src/retry.ts

@@ -0,0 +1,62 @@
+import type { RetryConfig } from "./types.js";
+
+export const DEFAULT_RETRY_CONFIG: RetryConfig = {
+  maxRetries: 3,
+  initialDelayMs: 1000,
+  backoffMultiplier: 2,
+  maxDelayMs: 30000,
+};
+
+export function isRetryableError(status: number): boolean {
+  if (status === 0 || status === 408 || status === 429) return true;
+  return status >= 500 && status < 600;
+}
+
+export async function withRetry<T>(
+  fn: (attempt: number) => Promise<T>,
+  config: RetryConfig,
+  onRetry?: (attempt: number, error: Error) => void,
+  signal?: AbortSignal
+): Promise<T> {
+  let lastError: Error | undefined;
+
+  for (let attempt = 0; attempt <= config.maxRetries; attempt++) {
+    if (signal?.aborted) {
+      throw new Error("Upload aborted");
+    }
+
+    try {
+      return await fn(attempt);
+    } catch (err) {
+      lastError = err instanceof Error ? err : new Error(String(err));
+
+      if (attempt >= config.maxRetries) break;
+
+      // Check if the error contains a retryable status
+      const statusMatch = lastError.message.match(/status (\d+)/);
+      if (statusMatch) {
+        const status = parseInt(statusMatch[1]!, 10);
+        if (!isRetryableError(status)) break;
+      }
+
+      const delay = Math.min(
+        config.initialDelayMs * Math.pow(config.backoffMultiplier, attempt),
+        config.maxDelayMs
+      );
+      // Add jitter: 0.5x to 1.5x of delay
+      const jitteredDelay = delay * (0.5 + Math.random());
+
+      onRetry?.(attempt + 1, lastError);
+
+      await new Promise<void>((resolve, reject) => {
+        const timeout = setTimeout(resolve, jitteredDelay);
+        signal?.addEventListener("abort", () => {
+          clearTimeout(timeout);
+          reject(new Error("Upload aborted"));
+        }, { once: true });
+      });
+    }
+  }
+
+  throw lastError ?? new Error("Retry failed");
+}

package/src/styles.css

@@ -0,0 +1,126 @@
+.uploadbox-button-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.uploadbox-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #fff;
+  background-color: #2563eb;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  min-width: 120px;
+}
+
+.uploadbox-button:hover:not(:disabled) {
+  background-color: #1d4ed8;
+}
+
+.uploadbox-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.uploadbox-progress-bar {
+  width: 100%;
+  max-width: 200px;
+  height: 4px;
+  background-color: #e5e7eb;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.uploadbox-progress-bar-fill {
+  height: 100%;
+  background-color: #2563eb;
+  border-radius: 2px;
+  transition: width 0.2s ease;
+}
+
+/* Dropzone */
+.uploadbox-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  border: 2px dashed #d1d5db;
+  border-radius: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-align: center;
+  min-height: 200px;
+  background-color: #fafafa;
+}
+
+.uploadbox-dropzone:hover {
+  border-color: #9ca3af;
+  background-color: #f5f5f5;
+}
+
+.uploadbox-dropzone--dragover {
+  border-color: #2563eb;
+  background-color: #eff6ff;
+}
+
+.uploadbox-dropzone--uploading {
+  border-color: #2563eb;
+  cursor: default;
+}
+
+.uploadbox-dropzone--complete {
+  border-color: #16a34a;
+  background-color: #f0fdf4;
+}
+
+.uploadbox-dropzone--error {
+  border-color: #dc2626;
+  background-color: #fef2f2;
+}
+
+.uploadbox-dropzone-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.uploadbox-dropzone-icon {
+  color: #9ca3af;
+}
+
+.uploadbox-dropzone-label {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0;
+}
+
+.uploadbox-dropzone-allowed {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  margin: 0;
+}
+
+.uploadbox-dropzone-selected {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.uploadbox-dropzone-selected p {
+  font-size: 0.8125rem;
+  color: #374151;
+  margin: 0;
+  font-weight: 500;
+}

package/src/types.ts

@@ -0,0 +1,96 @@
+import type { FileRouter, RouterConfig } from "@uploadbox/core";
+
+export type EndpointHelper<TRouter extends FileRouter> = keyof TRouter & string;
+
+export interface UploadProgressEvent {
+  loaded: number;
+  total: number;
+  percent: number;
+}
+
+export interface UploadedFile {
+  key: string;
+  name: string;
+  size: number;
+  type: string;
+  url: string;
+  customMetadata?: Record<string, string>;
+}
+
+export type FileUploadStatus = "pending" | "uploading" | "retrying" | "complete" | "error";
+
+export interface FileProgress {
+  fileId: string;
+  name: string;
+  size: number;
+  type: string;
+  status: FileUploadStatus;
+  loaded: number;
+  percent: number;
+  speed: number;
+  eta: number;
+  error?: string;
+  retryCount: number;
+  key?: string;
+}
+
+export interface EnhancedUploadProgressEvent extends UploadProgressEvent {
+  fileProgress: FileProgress[];
+}
+
+export interface RetryConfig {
+  maxRetries: number;
+  initialDelayMs: number;
+  backoffMultiplier: number;
+  maxDelayMs: number;
+}
+
+export interface UseUploadboxOpts<TRouter extends FileRouter, TEndpoint extends keyof TRouter & string> {
+  endpoint: TEndpoint;
+  onClientUploadComplete?: (files: UploadedFile[]) => void;
+  onUploadError?: (error: Error) => void;
+  onUploadProgress?: (progress: EnhancedUploadProgressEvent) => void;
+  onBeforeUploadBegin?: (files: File[]) => File[];
+  headers?: Record<string, string>;
+  getFileMetadata?: (file: File) => Record<string, string>;
+  ttlSeconds?: number;
+  retry?: RetryConfig | false;
+}
+
+export interface UseUploadboxReturn {
+  startUpload: (files: File[]) => Promise<UploadedFile[] | undefined>;
+  isUploading: boolean;
+  progress: number;
+  routeConfig: RouterConfig[string] | undefined;
+  fileProgress: FileProgress[];
+  abort: () => void;
+}
+
+export interface UploadButtonProps<TRouter extends FileRouter, TEndpoint extends keyof TRouter & string> {
+  endpoint: TEndpoint;
+  onClientUploadComplete?: (files: UploadedFile[]) => void;
+  onUploadError?: (error: Error) => void;
+  onUploadProgress?: (progress: UploadProgressEvent) => void;
+  onBeforeUploadBegin?: (files: File[]) => File[];
+  className?: string;
+  disabled?: boolean;
+  content?: {
+    button?: string;
+    allowedContent?: string;
+  };
+}
+
+export interface UploadDropzoneProps<TRouter extends FileRouter, TEndpoint extends keyof TRouter & string> {
+  endpoint: TEndpoint;
+  onClientUploadComplete?: (files: UploadedFile[]) => void;
+  onUploadError?: (error: Error) => void;
+  onUploadProgress?: (progress: UploadProgressEvent) => void;
+  onBeforeUploadBegin?: (files: File[]) => File[];
+  className?: string;
+  disabled?: boolean;
+  content?: {
+    label?: string;
+    allowedContent?: string;
+    button?: string;
+  };
+}

package/src/upload-button.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import React, { useRef, useCallback } from "react";
+import type { FileRouter } from "@uploadbox/core";
+import type { UploadButtonProps } from "./types.js";
+import { useUploadbox } from "./use-uploadbox.js";
+
+export function UploadButton<
+  TRouter extends FileRouter,
+  TEndpoint extends keyof TRouter & string
+>(props: UploadButtonProps<TRouter, TEndpoint>) {
+  const {
+    endpoint,
+    onClientUploadComplete,
+    onUploadError,
+    onUploadProgress,
+    onBeforeUploadBegin,
+    className,
+    disabled,
+    content,
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { startUpload, isUploading, progress } = useUploadbox<TRouter, TEndpoint>(
+    endpoint,
+    { onClientUploadComplete, onUploadError, onUploadProgress, onBeforeUploadBegin }
+  );
+
+  const handleClick = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+
+  const handleChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files ?? []);
+      if (files.length > 0) {
+        await startUpload(files);
+      }
+      // Reset input so the same file can be selected again
+      if (inputRef.current) inputRef.current.value = "";
+    },
+    [startUpload]
+  );
+
+  return (
+    <div className={`uploadbox-button-wrapper ${className ?? ""}`}>
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        onChange={handleChange}
+        style={{ display: "none" }}
+        disabled={disabled || isUploading}
+      />
+      <button
+        type="button"
+        className="uploadbox-button"
+        onClick={handleClick}
+        disabled={disabled || isUploading}
+      >
+        {isUploading
+          ? `Uploading... ${progress}%`
+          : content?.button ?? "Upload Files"}
+      </button>
+      {isUploading && (
+        <div className="uploadbox-progress-bar">
+          <div
+            className="uploadbox-progress-bar-fill"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/upload-dropzone.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import type { FileRouter } from "@uploadbox/core";
+import type { UploadDropzoneProps } from "./types.js";
+import { useUploadbox } from "./use-uploadbox.js";
+
+type DropzoneState = "idle" | "dragover" | "uploading" | "complete" | "error";
+
+export function UploadDropzone<
+  TRouter extends FileRouter,
+  TEndpoint extends keyof TRouter & string
+>(props: UploadDropzoneProps<TRouter, TEndpoint>) {
+  const {
+    endpoint,
+    onClientUploadComplete,
+    onUploadError,
+    onUploadProgress,
+    onBeforeUploadBegin,
+    className,
+    disabled,
+    content,
+  } = props;
+
+  const [state, setState] = useState<DropzoneState>("idle");
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+
+  const { startUpload, isUploading, progress } = useUploadbox<TRouter, TEndpoint>(
+    endpoint,
+    {
+      onClientUploadComplete: (files) => {
+        setState("complete");
+        setSelectedFiles([]);
+        onClientUploadComplete?.(files);
+        setTimeout(() => setState("idle"), 2000);
+      },
+      onUploadError: (error) => {
+        setState("error");
+        onUploadError?.(error);
+        setTimeout(() => setState("idle"), 3000);
+      },
+      onUploadProgress,
+      onBeforeUploadBegin,
+    }
+  );
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setSelectedFiles(acceptedFiles);
+    setState("idle");
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    disabled: disabled || isUploading,
+  });
+
+  const handleUpload = useCallback(async () => {
+    if (selectedFiles.length === 0) return;
+    setState("uploading");
+    await startUpload(selectedFiles);
+  }, [selectedFiles, startUpload]);
+
+  const stateClass = isDragActive ? "dragover" : state;
+
+  return (
+    <div
+      {...getRootProps()}
+      className={`uploadbox-dropzone uploadbox-dropzone--${stateClass} ${className ?? ""}`}
+    >
+      <input {...getInputProps()} />
+
+      {state === "complete" ? (
+        <div className="uploadbox-dropzone-content">
+          <p className="uploadbox-dropzone-label">Upload complete!</p>
+        </div>
+      ) : state === "error" ? (
+        <div className="uploadbox-dropzone-content">
+          <p className="uploadbox-dropzone-label">Upload failed. Try again.</p>
+        </div>
+      ) : (
+        <div className="uploadbox-dropzone-content">
+          <svg
+            className="uploadbox-dropzone-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="40"
+            height="40"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="17 8 12 3 7 8" />
+            <line x1="12" y1="3" x2="12" y2="15" />
+          </svg>
+
+          <p className="uploadbox-dropzone-label">
+            {isDragActive
+              ? "Drop files here"
+              : content?.label ?? "Drag & drop files here, or click to browse"}
+          </p>
+
+          {content?.allowedContent && (
+            <p className="uploadbox-dropzone-allowed">{content.allowedContent}</p>
+          )}
+
+          {selectedFiles.length > 0 && !isUploading && (
+            <div className="uploadbox-dropzone-selected">
+              <p>{selectedFiles.length} file(s) selected</p>
+              <button
+                type="button"
+                className="uploadbox-button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleUpload();
+                }}
+              >
+                {content?.button ?? "Upload"}
+              </button>
+            </div>
+          )}
+
+          {isUploading && (
+            <div className="uploadbox-progress-bar">
+              <div
+                className="uploadbox-progress-bar-fill"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}