feat: add custom fetch override

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/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;
 };
 
@@ -54,7 +61,13 @@ export const generateUploadDropzone = <TRouter extends FileRouter>(
       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;
 };
 
@@ -74,6 +87,8 @@ export const generateUploader = <TRouter extends FileRouter>(
       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;
 };

packages/react/src/types.ts

@@ -2,6 +2,7 @@ import type {
   ClassListMerger,
   ErrorMessage,
   ExtendObjectIf,
+  FetchEsque,
   MaybePromise,
   UploadThingError,
 } from "@uploadthing/shared";
@@ -26,6 +27,25 @@ export interface GenerateTypedHelpersOptions {
    * @default (VERCEL_URL ?? window.location.origin) + "/api/uploadthing"
    */
   url?: string | URL;
+  /**
+   * 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 type UseUploadthingProps<
@@ -122,6 +142,25 @@ export type UploadthingComponentProps<
    * @default (VERCEL_URL ?? window.location.origin) + "/api/uploadthing"
    */
   url?: string | URL;
+  /**
+   * 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;
   config?: {
     mode?: "auto" | "manual";
     appendOnPaste?: boolean;

packages/react/src/useUploadThing.ts

@@ -3,6 +3,7 @@ import { useRef, useState } from "react";
 import type {
   EndpointMetadata,
   ExpandedRouteConfig,
+  FetchEsque,
 } from "@uploadthing/shared";
 import {
   INTERNAL_DO_NOT_USE__fatalClientError,
@@ -30,14 +31,17 @@ import useFetch from "./utils/useFetch";
 
 declare const globalThis: {
   __UPLOADTHING?: EndpointMetadata;
+  fetch: FetchEsque;
 };
 
 const useRouteConfig = (
+  fetch: FetchEsque,
   url: URL,
   endpoint: string,
 ): ExpandedRouteConfig | undefined => {
   const maybeServerData = globalThis.__UPLOADTHING;
   const { data } = useFetch<EndpointMetadata>(
+    fetch,
     // Don't fetch if we already have the data
     maybeServerData ? undefined : url.href,
   );
@@ -55,9 +59,11 @@ export function __useUploadThingInternal<
 >(
   url: URL,
   endpoint: EndpointArg<TRouter, TEndpoint>,
+  fetch: FetchEsque,
   opts?: UseUploadthingProps<TRouter[TEndpoint]>,
 ) {
   const { uploadFiles, routeRegistry } = genUploader<TRouter>({
+    fetch,
     url,
     package: "@uploadthing/react",
   });
@@ -134,7 +140,7 @@ export function __useUploadThingInternal<
   });
 
   const _endpoint = unwrap(endpoint, routeRegistry);
-  const routeConfig = useRouteConfig(url, _endpoint as string);
+  const routeConfig = useRouteConfig(fetch, url, _endpoint as string);
 
   return {
     startUpload,
@@ -152,18 +158,20 @@ export const generateReactHelpers = <TRouter extends FileRouter>(
     uploadthingClientVersion,
   );
 
+  const fetch = initOpts?.fetch ?? globalThis.fetch;
   const url = resolveMaybeUrlArg(initOpts?.url);
 
   const clientHelpers = genUploader<TRouter>({
     url,
     package: "@uploadthing/react",
+    fetch,
   });
 
   function useUploadThing<TEndpoint extends keyof TRouter>(
     endpoint: EndpointArg<TRouter, TEndpoint>,
     opts?: UseUploadthingProps<TRouter[TEndpoint]>,
   ) {
-    return __useUploadThingInternal(url, endpoint, opts);
+    return __useUploadThingInternal(url, endpoint, fetch, opts);
   }
 
   function getRouteConfig(slug: EndpointArg<TRouter, keyof TRouter>) {

packages/react/src/utils/useFetch.ts

@@ -1,6 +1,7 @@
 // Ripped from https://usehooks-ts.com/react-hook/use-fetch
 import { useEffect, useReducer, useRef } from "react";
 
+import type { FetchEsque } from "@uploadthing/shared";
 import { safeParseJSON } from "@uploadthing/shared";
 
 interface State<T> {
@@ -16,7 +17,11 @@ type Action<T> =
   | { type: "fetched"; payload: T }
   | { type: "error"; payload: Error };
 
-function useFetch<T = unknown>(url?: string, options?: RequestInit): State<T> {
+function useFetch<T = unknown>(
+  fetch: FetchEsque,
+  url?: string,
+  options?: RequestInit,
+): State<T> {
   const cache = useRef<Cache<T>>({});
 
   // Used to prevent state update if the component is unmounted

packages/uploadthing/src/client.ts

@@ -1,7 +1,7 @@
 import * as Arr from "effect/Array";
 import * as Micro from "effect/Micro";
 
-import type { ExpandedRouteConfig } from "@uploadthing/shared";
+import type { ExpandedRouteConfig, FetchEsque } from "@uploadthing/shared";
 import {
   createIdentityProxy,
   FetchContext,
@@ -112,6 +112,7 @@ export const genUploader = <TRouter extends FileRouter>(
       url: resolveMaybeUrlArg(initOpts?.url),
       headers: opts.headers,
     });
+    const fetchFn: FetchEsque = initOpts.fetch ?? window.fetch;
 
     const presigneds = await Micro.runPromise(
       utReporter("upload", {
@@ -123,7 +124,7 @@ export const genUploader = <TRouter extends FileRouter>(
           type: f.type,
           lastModified: f.lastModified,
         })),
-      }).pipe(Micro.provideService(FetchContext, window.fetch)),
+      }).pipe(Micro.provideService(FetchContext, fetchFn)),
     );
 
     const totalSize = opts.files.reduce((acc, f) => acc + f.size, 0);
@@ -141,7 +142,7 @@ export const genUploader = <TRouter extends FileRouter>(
             totalProgress: Math.round((totalLoaded / totalSize) * 100),
           });
         },
-      }).pipe(Micro.provideService(FetchContext, window.fetch));
+      }).pipe(Micro.provideService(FetchContext, fetchFn));
 
     for (const [i, p] of presigneds.entries()) {
       const file = opts.files[i];
@@ -254,6 +255,7 @@ export const genUploader = <TRouter extends FileRouter>(
     >,
   ) => {
     const endpoint = typeof slug === "function" ? slug(routeRegistry) : slug;
+    const fetchFn: FetchEsque = initOpts.fetch ?? window.fetch;
 
     return uploadFilesInternal<TRouter, TEndpoint>(endpoint, {
       ...opts,
@@ -263,7 +265,7 @@ export const genUploader = <TRouter extends FileRouter>(
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       input: (opts as any).input as inferEndpointInput<TRouter[TEndpoint]>,
     })
-      .pipe((effect) =>
+      .pipe(Micro.provideService(FetchContext, fetchFn), (effect) =>
         Micro.runPromiseExit(effect, opts.signal && { signal: opts.signal }),
       )
       .then((exit) => {