feat: add custom fetch override

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) => {

packages/uploadthing/src/internal/upload.browser.ts

@@ -1,8 +1,8 @@
 import { unsafeCoerce } from "effect/Function";
 import * as Micro from "effect/Micro";
 
-import type { FetchError } from "@uploadthing/shared";
-import { FetchContext, fetchEff, UploadThingError } from "@uploadthing/shared";
+import type { FetchContext, FetchError } from "@uploadthing/shared";
+import { fetchEff, UploadThingError } from "@uploadthing/shared";
 
 import { version } from "../../package.json";
 import type {
@@ -119,7 +119,8 @@ export const uploadFilesInternal = <
   opts: UploadFilesOptions<TRouter[TEndpoint]>,
 ): Micro.Micro<
   ClientUploadedFileData<TServerOutput>[],
-  UploadThingError | FetchError
+  UploadThingError | FetchError,
+  FetchContext
 > => {
   // classic service right here
   const reportEventToUT = createUTReporter({
@@ -132,16 +133,17 @@ export const uploadFilesInternal = <
   const totalSize = opts.files.reduce((acc, f) => acc + f.size, 0);
   let totalLoaded = 0;
 
-  return reportEventToUT("upload", {
-    input: "input" in opts ? opts.input : null,
-    files: opts.files.map((f) => ({
-      name: f.name,
-      size: f.size,
-      type: f.type,
-      lastModified: f.lastModified,
-    })),
-  }).pipe(
-    Micro.flatMap((presigneds) =>
+  return Micro.flatMap(
+    reportEventToUT("upload", {
+      input: "input" in opts ? opts.input : null,
+      files: opts.files.map((f) => ({
+        name: f.name,
+        size: f.size,
+        type: f.type,
+        lastModified: f.lastModified,
+      })),
+    }),
+    (presigneds) =>
       Micro.forEach(
         presigneds,
         (presigned, i) =>
@@ -174,7 +176,5 @@ export const uploadFilesInternal = <
           ),
         { concurrency: 6 },
       ),
-    ),
-    Micro.provideService(FetchContext, window.fetch),
   );
 };

packages/uploadthing/src/types.ts

@@ -207,6 +207,25 @@ export type GenerateUploaderOptions = {
    * @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;
   /**
    * The uploadthing package that is making this request
    * @example "@uploadthing/react"

packages/uploadthing/test/client.test.ts

@@ -6,7 +6,10 @@
 
 import { genUploader } from "../src/client";
 import { createRouteHandler, createUploadthing } from "../src/express";
-import type { ClientUploadedFileData } from "../src/types";
+import type {
+  ClientUploadedFileData,
+  GenerateUploaderOptions,
+} from "../src/types";
 import {
   appUrlPattern,
   doNotExecute,
@@ -20,7 +23,9 @@
   UTFS_IO_URL,
 } from "./__test-helpers";
 
-export const setupUTServer = async () => {
+export const setupUTServer = async (
+  clientOpts?: Partial<GenerateUploaderOptions>,
+) => {
   const f = createUploadthing({
     errorFormatter(err) {
       return { message: err.message };
@@ -90,6 +95,7 @@
   const { uploadFiles } = genUploader<typeof router>({
     package: "vitest",
     url: `http://localhost:${port}`,
+    ...clientOpts,
   });
 
   return {
@@ -228,6 +234,30 @@
     await close();
   });
 
+  it("uses custom fetch implementation if set", async () => {
+    const fetchFn = vi.fn();
+
+    const { uploadFiles, close } = await setupUTServer({
+      fetch: (input, init) => {
+        fetchFn(input, init);
+        return window.fetch(input, init);
+      },
+    });
+
+    const file = new File(["foo"], "foo.txt", { type: "text/plain" });
+    await uploadFiles("foo", { files: [file] });
+
+    expect(fetchFn).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        method: "POST",
+        body: expect.any(FormData),
+      }),
+    );
+
+    await close();
+  });
+
   // Should we retry?
   // it("succeeds after retries", { timeout: 15e3 }, async ({ db }) => {
   //   const { uploadFiles, close } = await setupUTServer();