feat: add custom fetch override

.changeset/nice-penguins-grow.md

@@ -0,0 +1,10 @@
+---
+"uploadthing": minor
+"@uploadthing/svelte": minor
+"@uploadthing/react": minor
+"@uploadthing/solid": minor
+"@uploadthing/expo": minor
+"@uploadthing/vue": minor
+---
+
+feat: allow custom fetch override

.github/workflows/ci.yaml

@@ -31,6 +31,10 @@ jobs:
 
       - name: Build
         run: pnpm turbo build --filter "./packages/*"
+
+      - name: Install Playwright
+        run: pnpm exec playwright install chromium
+
       - name: Test
         run: pnpm run test
         env:

.nvmrc

@@ -1 +1 @@
-20.11
+22.12

docs/package.json

@@ -19,6 +19,7 @@
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.11",
     "@scalar/api-reference-react": "^0.3.37",
+    "@shikijs/transformers": "^1.17.5",
     "@sindresorhus/slugify": "^2.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/mdast": "^4.0.4",
@@ -49,6 +50,7 @@
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.1",
     "remark-unwrap-images": "^4.0.0",
+    "sharp": "0.33.1",
     "shiki": "^1.17.5",
     "simple-functional-loader": "^1.2.1",
     "tailwindcss": "^3.4.16",
@@ -59,14 +61,5 @@
     "uploadthing": "workspace:*",
     "zod": "^3.23.8",
     "zustand": "^4.3.2"
-  },
-  "devDependencies": {
-    "@shikijs/transformers": "^1.17.5",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.1",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "sharp": "0.33.1"
-  },
-  "packageManager": "[email protected]"
+  }
 }

examples/backend-adapters/package.json

@@ -23,7 +23,7 @@
     "test": "playwright test"
   },
   "dependencies": {
-    "@playwright/test": "1.45.0",
+    "@playwright/test": "1.49.1",
     "@uploadthing/react": "7.1.5",
     "concurrently": "^8.2.2",
     "typescript": "^5.5.2",

examples/backend-adapters/server/package.json

@@ -12,15 +12,15 @@
     "dev:effect": "NODE_ENV=development PORT=3003 tsx watch src/effect-platform.ts"
   },
   "dependencies": {
-    "@effect/platform": "0.70.7",
-    "@effect/platform-node": "0.65.7",
+    "@effect/platform": "0.72.0",
+    "@effect/platform-node": "0.68.0",
     "@elysiajs/cors": "^1.1.1",
     "@fastify/cors": "^9.0.1",
     "@hono/node-server": "^1.8.2",
     "@sinclair/typebox": "^0.34.3",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
-    "effect": "3.11.5",
+    "effect": "3.12.0",
     "elysia": "^1.1.16",
     "express": "^4.18.2",
     "fastify": "^4.26.1",

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "engines": {
-    "node": ">=20.x",
+    "node": ">=22.x",
     "pnpm": "9.x"
   },
   "packageManager": "[email protected]",
@@ -40,32 +40,26 @@
     "@actions/github": "^6.0.0",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@effect/vitest": "0.13.15",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+    "@effect/vitest": "0.16.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
     "@manypkg/cli": "^0.21.3",
-    "@playwright/test": "1.45.0",
     "@prettier/sync": "^0.5.2",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
     "@types/bun": "^1.1.5",
     "@types/node": "^20.14.0",
     "@uploadthing/eslint-config": "workspace:*",
-    "@vitest/coverage-v8": "^2.1.2",
-    "happy-dom": "^13.6.2",
-    "msw": "2.2.13",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "@vitest/browser": "^2.1.8",
+    "@vitest/coverage-v8": "^2.1.8",
+    "msw": "2.7.0",
+    "playwright": "1.49.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "turbo": "2.3.3",
     "typescript": "^5.5.2",
     "uploadthing": "workspace:*",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^2.1.2"
+    "vitest": "^2.1.8"
   },
   "pnpm": {
     "patchedDependencies": {
-      "[email protected]": "patches/[email protected]",
-      "@mswjs/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]"
     }
   }

packages/expo/src/document-picker.ts

@@ -4,7 +4,11 @@ import * as DocumentPicker from "expo-document-picker";
 import type { UseUploadthingProps } from "@uploadthing/react";
 import { __useUploadThingInternal } from "@uploadthing/react/native";
 import { generatePermittedFileTypes } from "@uploadthing/shared";
-import type { ExpandedRouteConfig, ExtendObjectIf } from "@uploadthing/shared";
+import type {
+  ExpandedRouteConfig,
+  ExtendObjectIf,
+  FetchEsque,
+} from "@uploadthing/shared";
 import type { FileRouter } from "uploadthing/server";
 import type { inferEndpointInput } from "uploadthing/types";
 
@@ -33,6 +37,7 @@ export const GENERATE_useDocumentUploader = <
   TRouter extends FileRouter,
 >(initOpts: {
   url: URL;
+  fetch: FetchEsque;
 }) => {
   const useDocumentUploader = <TEndpoint extends keyof TRouter>(
     endpoint: TEndpoint,
@@ -41,6 +46,7 @@ export const GENERATE_useDocumentUploader = <
     const { routeConfig, startUpload, isUploading } = __useUploadThingInternal(
       initOpts.url,
       endpoint,
+      initOpts.fetch,
       opts,
     );
     const { mimeTypes, multiple } = useMemo(

packages/expo/src/image-picker.ts

@@ -4,7 +4,11 @@ import * as ImagePicker from "expo-image-picker";
 import type { UseUploadthingProps } from "@uploadthing/react";
 import { __useUploadThingInternal } from "@uploadthing/react/native";
 import { generatePermittedFileTypes } from "@uploadthing/shared";
-import type { ExpandedRouteConfig, ExtendObjectIf } from "@uploadthing/shared";
+import type {
+  ExpandedRouteConfig,
+  ExtendObjectIf,
+  FetchEsque,
+} from "@uploadthing/shared";
 import type { FileRouter } from "uploadthing/server";
 import type { inferEndpointInput } from "uploadthing/types";
 
@@ -25,6 +29,7 @@ export const GENERATE_useImageUploader = <
   TRouter extends FileRouter,
 >(initOpts: {
   url: URL;
+  fetch: FetchEsque;
 }) => {
   const useImageUploader = <TEndpoint extends keyof TRouter>(
     endpoint: TEndpoint,
@@ -33,6 +38,7 @@ export const GENERATE_useImageUploader = <
     const { routeConfig, startUpload, isUploading } = __useUploadThingInternal(
       initOpts.url,
       endpoint,
+      initOpts.fetch,
       opts,
     );
     const { mediaTypes, multiple } = useMemo(

packages/expo/src/index.ts

@@ -1,6 +1,7 @@
 import Constants from "expo-constants";
 
 import { generateReactHelpers } from "@uploadthing/react/native";
+import type { FetchEsque } from "@uploadthing/shared";
 import { warnIfInvalidPeerDependency } from "@uploadthing/shared";
 import { version as uploadthingClientVersion } from "uploadthing/client";
 import type { FileRouter } from "uploadthing/types";
@@ -20,6 +21,25 @@ export interface GenerateTypedHelpersOptions {
    * @default (process.env.EXPO_PUBLIC_SERVER_ORIGIN ?? ExpoConstants.debuggerHost) + "/api/uploadthing"
    */
   url?: URL | string;
+  /**
+   * Provide a custom fetch implementation.
+   * @default `globalThis.fetch`
+   * @example
+   * ```ts
+   * fetch: (input, init) => {
+   *   if (input.toString().startsWith(MY_SERVER_URL)) {
+   *     // Include cookies in the request to your API
+   *     return fetch(input, {
+   *       ...init,
+   *       credentials: "include",
+   *     });
+   *   }
+   *
+   *   return fetch(input, init);
+   * }
+   * ```
+   */
+  fetch?: FetchEsque | undefined;
 }
 
 export const generateReactNativeHelpers = <TRouter extends FileRouter>(
@@ -48,9 +68,16 @@ export const generateReactNativeHelpers = <TRouter extends FileRouter>(
     );
   }
 
-  const vanillaHelpers = generateReactHelpers<TRouter>({ ...initOpts, url });
-  const useImageUploader = GENERATE_useImageUploader<TRouter>({ url });
-  const useDocumentUploader = GENERATE_useDocumentUploader<TRouter>({ url });
+  const fetch = initOpts?.fetch ?? globalThis.fetch;
+  const opts = {
+    ...initOpts,
+    url,
+    fetch,
+  };
+
+  const vanillaHelpers = generateReactHelpers<TRouter>(opts);
+  const useImageUploader = GENERATE_useImageUploader<TRouter>(opts);
+  const useDocumentUploader = GENERATE_useDocumentUploader<TRouter>(opts);
 
   return { ...vanillaHelpers, useImageUploader, useDocumentUploader };
 };

packages/react/package.json

@@ -81,7 +81,6 @@
     "@types/react-dom": "18.3.0",
     "@uploadthing/eslint-config": "workspace:*",
     "@uploadthing/tsconfig": "workspace:*",
-    "@vitest/browser": "2.1.2",
     "bunchee": "^6.1.2",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
@@ -90,12 +89,21 @@
     "tailwindcss": "^3.4.16",
     "typescript": "^5.5.2",
     "uploadthing": "workspace:*",
+    "vitest-browser-react": "0.0.4",
     "wait-on": "^7.2.0",
     "zod": "^3.23.8"
   },
   "eslintConfig": {
     "root": true,
     "rules": {
+      "no-console": "error",
+      "no-restricted-globals": [
+        "error",
+        {
+          "name": "fetch",
+          "message": "fetch should be passed as parameter to support overriding default behaviors"
+        }
+      ],
       "no-restricted-imports": [
         "error",
         {

packages/react/src/components/button.tsx

@@ -111,6 +111,7 @@ export function UploadButton<
   const { startUpload, isUploading, routeConfig } = __useUploadThingInternal(
     resolveMaybeUrlArg($props.url),
     $props.endpoint,
+    $props.fetch ?? globalThis.fetch,
     {
       signal: acRef.current.signal,
       headers: $props.headers,

packages/react/src/components/dropzone.tsx

@@ -146,6 +146,7 @@ export function UploadDropzone<
   const { startUpload, isUploading, routeConfig } = __useUploadThingInternal(
     resolveMaybeUrlArg($props.url),
     $props.endpoint,
+    $props.fetch ?? globalThis.fetch,
     {
       signal: acRef.current.signal,
       headers: $props.headers,

packages/react/src/components/index.tsx

@@ -28,13 +28,20 @@ export const generateUploadButton = <TRouter extends FileRouter>(
   );
 
   const url = resolveMaybeUrlArg(opts?.url);
+  const fetch = opts?.fetch ?? globalThis.fetch;
 
   const TypedButton = <TEndpoint extends keyof TRouter>(
     props: Omit<
       UploadButtonProps<TRouter, TEndpoint>,
       keyof GenerateTypedHelpersOptions
     >,
-  ) => <UploadButton<TRouter, TEndpoint> {...(props as any)} url={url} />;
+  ) => (
+    <UploadButton<TRouter, TEndpoint>
+      {...(props as any)}
+      url={url}
+      fetch={fetch}
+    />
+  );
   return TypedButton;
 };
 
@@ -48,13 +55,20 @@ export const generateUploadDropzone = <TRouter extends FileRouter>(
   );
 
   const url = resolveMaybeUrlArg(opts?.url);
+  const fetch = opts?.fetch ?? globalThis.fetch;
 
   const TypedDropzone = <TEndpoint extends keyof TRouter>(
     props: Omit<
       UploadDropzoneProps<TRouter, TEndpoint>,
       keyof GenerateTypedHelpersOptions
     >,
-  ) => <UploadDropzone<TRouter, TEndpoint> {...(props as any)} url={url} />;
+  ) => (
+    <UploadDropzone<TRouter, TEndpoint>
+      {...(props as any)}
+      url={url}
+      fetch={fetch}
+    />
+  );
   return TypedDropzone;
 };
 
@@ -68,12 +82,15 @@ export const generateUploader = <TRouter extends FileRouter>(
   );
 
   const url = resolveMaybeUrlArg(opts?.url);
+  const fetch = opts?.fetch ?? globalThis.fetch;
 
   const TypedUploader = <TEndpoint extends keyof TRouter>(
     props: Omit<
       UploadthingComponentProps<TRouter, TEndpoint>,
       keyof GenerateTypedHelpersOptions
     >,
-  ) => <Uploader<TRouter, TEndpoint> {...(props as any)} url={url} />;
+  ) => (
+    <Uploader<TRouter, TEndpoint> {...(props as any)} url={url} fetch={fetch} />
+  );
   return TypedUploader;
 };