Merge branch 'main' into routeRegistry

.changeset/breezy-windows-admire.md

@@ -0,0 +1,10 @@
+---
+"@uploadthing/react": patch
+"@uploadthing/shared": patch
+"@uploadthing/solid": patch
+"@uploadthing/svelte": patch
+"uploadthing": patch
+"@uploadthing/vue": patch
+---
+
+chore: bump internal effect dependencies (#1005, #1009)

.changeset/chatty-bananas-destroy.md

@@ -0,0 +1,5 @@
+---
+"uploadthing": patch
+---
+
+fix: server handler not receiving the right middleware args when passed `{ request: Request }` instead of just Request (#1017)

.changeset/odd-cheetahs-kneel.md

@@ -0,0 +1,5 @@
+---
+"@uploadthing/svelte": patch
+---
+
+chore: allow svelte v5 peer dep (#1006)

.changeset/sharp-needles-collect.md

@@ -0,0 +1,5 @@
+---
+"@uploadthing/nuxt": patch
+---
+
+fix: options was not forwarded to uploadthing handler correctly

docs/src/app/(docs)/concepts/theming/page.mdx

@@ -135,6 +135,7 @@ type ButtonCallbackArguments = {
   isUploading: boolean;
   uploadProgress: number;
   fileTypes: string[];
+  files: File[];
 };
 
 type DropzoneCallbackArguments = {
@@ -143,6 +144,7 @@ type DropzoneCallbackArguments = {
   uploadProgress: number;
   fileTypes: string[];
   isDragActive: boolean;
+  files: File[];
 };
 ```
 

docs/src/app/(docs)/getting-started/tanstack-start/page.mdx

@@ -159,7 +159,6 @@ export const { useUploadThing } = generateReactHelpers<UploadRouter>();
     Include our CSS in your root route to make sure the components look right!
 
     ```tsx {{ title: "app/routes/__root.tsx" }}
-    // @ts-expect-error
     import uploadthingCss from "@uploadthing/react/styles.css?url";
 
     export const Route = createRootRoute({

examples/backend-adapters/client-react/package.json

@@ -18,6 +18,6 @@
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "typescript": "^5.5.2",
-    "vite": "^5.3.1"
+    "vite": "^5.4.8"
   }
 }

examples/backend-adapters/client-vanilla/package.json

@@ -13,6 +13,6 @@
   },
   "devDependencies": {
     "typescript": "^5.5.2",
-    "vite": "^5.3.1"
+    "vite": "^5.4.8"
   }
 }

examples/backend-adapters/client-vue/package.json

@@ -15,7 +15,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
     "typescript": "^5.5.2",
-    "vite": "^5.3.1",
+    "vite": "^5.4.8",
     "vue-tsc": "^2.0.6"
   }
 }

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.63.2",
-    "@effect/platform-node": "0.58.2",
-    "@effect/schema": "0.72.2",
+    "@effect/platform": "0.68.5",
+    "@effect/platform-node": "0.63.5",
+    "@effect/schema": "0.75.4",
     "@elysiajs/cors": "^1.1.1",
     "@fastify/cors": "^9.0.1",
     "@hono/node-server": "^1.8.2",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
-    "effect": "3.7.2",
+    "effect": "3.9.2",
     "elysia": "^1.1.16",
     "express": "^4.18.2",
     "fastify": "^4.26.1",

examples/backend-adapters/server/src/effect-platform.ts

@@ -2,8 +2,8 @@ import "dotenv/config";
 
 import { createServer } from "node:http";
 import {
+  FetchHttpClient,
   Headers,
-  HttpClient,
   HttpMiddleware,
   HttpRouter,
   HttpServer,
@@ -58,7 +58,7 @@ const app = router.pipe(
   cors,
   HttpServer.serve(HttpMiddleware.logger),
   HttpServer.withLogAddress,
-  Layer.provide(HttpClient.layer),
+  Layer.provide(FetchHttpClient.layer),
 );
 
 const Port = Config.integer("PORT").pipe(Config.withDefault(3000));

examples/minimal-expo/lib/trpc.tsx

@@ -34,7 +34,7 @@ const resolveUrl = () => {
       "/api/trpc",
       typeof window.location !== "undefined"
         ? window.location.origin
-        : process.env.EXPO_PUBLIC_SERVER_ORIGIN ?? `http://${debuggerHost}`,
+        : (process.env.EXPO_PUBLIC_SERVER_ORIGIN ?? `http://${debuggerHost}`),
     );
   } catch (e) {
     throw new Error(

examples/minimal-nuxt/nuxt.config.ts

@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  telemetry: false,
   modules: ["@uploadthing/nuxt"],
 });

examples/minimal-sveltekit/package.json

@@ -24,7 +24,7 @@
     "svelte-check": "^3.6.7",
     "tslib": "^2.6.2",
     "typescript": "^5.5.2",
-    "vite": "^5.3.1"
+    "vite": "^5.4.8"
   },
   "type": "module"
 }

examples/minimal-tanstack-start/app/client.tsx

@@ -1,3 +1,4 @@
+/// <reference types="vinxi/types/client" />
 import { StartClient } from "@tanstack/start";
 import { hydrateRoot } from "react-dom/client";
 

examples/minimal-tanstack-start/app/routes/__root.tsx

@@ -6,7 +6,6 @@ import {
 } from "@tanstack/react-router";
 import { Body, Head, Html, Meta, Scripts } from "@tanstack/start";
 
-// @ts-expect-error
 import uploadthingCss from "@uploadthing/react/styles.css?url";
 
 export const Route = createRootRoute({

examples/minimal-tanstack-start/app/server/uploadthing.ts

@@ -32,28 +32,18 @@ export const uploadRouter = {
       maxFileSize: "8GB",
     },
   })
-    .middleware(({ req, files }) => {
-      // Check some condition based on the incoming requrest
-      console.log("Request", req);
-      //^?
+    .middleware(({ req }) => {
+      // Check some condition based on the incoming request
       // if (!req.headers.get("x-some-header")) {
       //   throw new Error("x-some-header is required");
       // }
 
-      // (Optional) Label your files with a custom identifier
-      const filesWithMyIds = files.map((file, idx) => ({
-        ...file,
-        customId: `${idx}-HELLO`,
-      }));
-
       // Return some metadata to be stored with the file
-      return { foo: "bar" as const, [UTFiles]: filesWithMyIds };
+      return { foo: "bar" as const };
     })
     .onUploadComplete(({ file, metadata }) => {
       metadata;
       // ^?
-      file.customId;
-      //   ^?
       console.log("upload completed", file);
     }),
 } satisfies FileRouter;

examples/minimal-tanstack-start/app/ssr.tsx

@@ -1,3 +1,4 @@
+/// <reference types="vinxi/types/server" />
 import { getRouterManifest } from "@tanstack/start/router-manifest";
 import {
   createStartHandler,

examples/minimal-tanstack-start/package.json

@@ -8,9 +8,9 @@
     "start": "vinxi start"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.58.7",
-    "@tanstack/start": "^1.58.7",
-    "@uploadthing/react": "7.0.3",
+    "@tanstack/react-router": "^1.69.1",
+    "@tanstack/start": "^1.69.3",
+    "@uploadthing/react": "^7.0.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "uploadthing": "7.1.0",
@@ -19,7 +19,7 @@
   "devDependencies": {
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
     "typescript": "^5.5.2"
   }
 }

examples/minimal-tanstack-start/tsconfig.json

@@ -4,6 +4,7 @@
     "moduleResolution": "Bundler",
     "module": "ESNext",
     "target": "ES2022",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "strictNullChecks": true
   }
 }

examples/with-clerk-remix/package.json

@@ -28,8 +28,8 @@
     "postcss": "8.4.38",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.5.2",
-    "vite": "^5.3.1",
-    "vite-tsconfig-paths": "^4.3.1"
+    "vite": "^5.4.8",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "engines": {
     "node": ">=20.0.0"

package.json

@@ -38,7 +38,7 @@
     "@actions/github": "^6.0.0",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@effect/vitest": "0.9.2",
+    "@effect/vitest": "0.12.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@manypkg/cli": "^0.21.3",
     "@playwright/test": "1.45.0",
@@ -49,16 +49,16 @@
     "@types/bun": "^1.1.5",
     "@types/node": "^20.14.0",
     "@uploadthing/eslint-config": "workspace:*",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@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",
     "turbo": "2.1.3",
     "typescript": "^5.5.2",
     "uploadthing": "workspace:*",
-    "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^2.0.5"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^2.1.2"
   },
   "pnpm": {
     "patchedDependencies": {

packages/expo/src/index.ts

@@ -38,7 +38,7 @@ export const generateReactNativeHelpers = <TRouter extends FileRouter>(
       initOpts?.url ?? "/api/uploadthing",
       typeof window.location !== "undefined"
         ? window.location.origin
-        : process.env.EXPO_PUBLIC_SERVER_ORIGIN ?? `http://${debuggerHost}`,
+        : (process.env.EXPO_PUBLIC_SERVER_ORIGIN ?? `http://${debuggerHost}`),
     );
   } catch (e) {
     // Can't throw since window.location is undefined in Metro pass

packages/nuxt/playground/nuxt.config.ts

@@ -2,4 +2,5 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ["../src/module"],
+  telemetry: false,
 });

packages/nuxt/src/module.ts

@@ -16,8 +16,6 @@ import type { RouteHandlerConfig } from "uploadthing/internal/types";
 // Module options TypeScript interface definition
 export type ModuleOptions = RouteHandlerConfig & {
   routerPath: string;
-  secret?: string;
-  appId?: string;
 };
 
 export default defineNuxtModule<ModuleOptions>({
@@ -37,10 +35,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.runtimeConfig.uploadthing = defu(
       nuxt.options.runtimeConfig.uploadthing as any,
-      {
-        token: options.token,
-        logLevel: options.logLevel,
-      },
+      options,
     );
 
     // Set path to router

packages/react/package.json

@@ -81,7 +81,7 @@
     "@types/react-dom": "18.3.0",
     "@uploadthing/eslint-config": "workspace:*",
     "@uploadthing/tsconfig": "workspace:*",
-    "@vitest/browser": "2.0.5",
+    "@vitest/browser": "2.1.2",
     "bunchee": "^5.2.1",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",

packages/react/src/components/button.tsx

@@ -32,6 +32,7 @@ type ButtonStyleFieldCallbackArgs = {
   isUploading: boolean;
   uploadProgress: number;
   fileTypes: string[];
+  files: File[];
 };
 
 type ButtonAppearance = {
@@ -218,12 +219,17 @@ export function UploadButton<
     if (mode === "auto") uploadFiles(files);
   });
 
-  const styleFieldArg = {
-    ready: state !== "readying",
-    isUploading: state === "uploading",
-    uploadProgress,
-    fileTypes,
-  } as ButtonStyleFieldCallbackArgs;
+  const styleFieldArg = useMemo(
+    () =>
+      ({
+        ready: state !== "readying",
+        isUploading: state === "uploading",
+        uploadProgress,
+        fileTypes,
+        files,
+      }) as ButtonStyleFieldCallbackArgs,
+    [fileTypes, files, state, uploadProgress],
+  );
 
   const renderButton = () => {
     const customContent = contentFieldToContent(

packages/react/src/components/dropzone.tsx

@@ -60,6 +60,7 @@ type DropzoneStyleFieldCallbackArgs = {
   uploadProgress: number;
   fileTypes: string[];
   isDragActive: boolean;
+  files: File[];
 };
 
 type DropzoneAppearance = {
@@ -249,13 +250,18 @@ export function UploadDropzone<
     if (mode === "auto") uploadFiles(filesToUpload);
   });
 
-  const styleFieldArg = {
-    ready: state !== "readying",
-    isUploading: state === "uploading",
-    uploadProgress,
-    fileTypes,
-    isDragActive,
-  } as DropzoneStyleFieldCallbackArgs;
+  const styleFieldArg = useMemo(
+    () =>
+      ({
+        ready: state !== "readying",
+        isUploading: state === "uploading",
+        uploadProgress,
+        fileTypes,
+        files,
+        isDragActive,
+      }) as DropzoneStyleFieldCallbackArgs,
+    [fileTypes, files, state, uploadProgress, isDragActive],
+  );
 
   const getUploadButtonContents = () => {
     const customContent = contentFieldToContent(

packages/shared/package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@uploadthing/mime-types": "workspace:*",
-    "effect": "3.7.2",
+    "effect": "3.9.2",
     "sqids": "^0.3.0"
   },
   "devDependencies": {

packages/solid/src/components/button.tsx

@@ -29,6 +29,7 @@ type ButtonStyleFieldCallbackArgs = {
   isUploading: () => boolean;
   uploadProgress: () => number;
   fileTypes: () => string[];
+  files: () => File[];
 };
 
 type ButtonAppearance = {
@@ -175,6 +176,7 @@ export function UploadButton<
     isUploading: uploadThing.isUploading,
     uploadProgress: uploadProgress,
     fileTypes: () => fileInfo().fileTypes,
+    files,
   } as ButtonStyleFieldCallbackArgs;
 
   const getButtonContent = () => {