Merge branch 'main' into sujayakar/add-convex-adapter

.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/release-canary.js

@@ -41,10 +41,15 @@ async function version() {
 
     // Update dependencies
     for (const dep in pkg.dependencies) {
-      if (versions[dep]) {
+      if (versions[dep] && pkg.dependencies[dep].startsWith("workspace:")) {
         pkg.dependencies[dep] = versions[dep];
       }
     }
+    for (const dep in pkg.peerDependencies) {
+      if (versions[dep] && pkg.peerDependencies[dep].startsWith("workspace:")) {
+        pkg.peerDependencies[dep] = versions[dep];
+      }
+    }
 
     const fmt = prettier.format(JSON.stringify(pkg), { filepath: pkgJsonPath });
     fs.writeFileSync(pkgJsonPath, fmt);

.github/replace-workspace-protocol.ts

@@ -34,17 +34,21 @@ await Promise.all(
 const workspacePkg = await Bun.file("package.json").json();
 for (const dep in workspacePkg.dependencies) {
   if (dep in packageVersions) {
-    workspacePkg.dependencies[dep] = packageVersions[dep];
+    if (workspacePkg.dependencies[dep].startsWith("workspace:")) {
+      workspacePkg.dependencies[dep] = packageVersions[dep];
+    }
   }
 }
 for (const dep in workspacePkg.peerDependencies) {
-  if (dep in packageVersions) {
+  if (
+    dep in packageVersions &&
+    workspacePkg.peerDependencies[dep].startsWith("workspace:")
+  ) {
     workspacePkg.peerDependencies[dep] = packageVersions[dep];
   }
 }
 
 // Remove unnecessary fields
-workspacePkg.eslintConfig = undefined;
 workspacePkg.devDependencies = undefined;
 workspacePkg.scripts = undefined;
 

.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:

.github/workflows/pkg-pr-new.yaml

@@ -1,6 +1,10 @@
 name: Publish Test Releases
 on: [push, pull_request]
 
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
 jobs:
   build:
     runs-on: ubuntu-latest

.gitignore

@@ -26,6 +26,7 @@ expo-env.d.ts
 .data
 .idea
 *.db
+*.timestamp_*
 
 # debug
 npm-debug.log*

.nvmrc

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

.vscode/settings.json

@@ -9,9 +9,19 @@
   "eslint.workingDirectories": [
     "docs",
     { "pattern": "./packages/**" },
-    { "pattern": "./examples/**" }
+    { "pattern": "./examples/**" },
+    { "pattern": "./tooling/**" },
+    { "pattern": "./playground/**" },
+    { "pattern": "./playground-v6/**" }
   ],
+  "eslint.useFlatConfig": true,
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#a21d1d",
+    "titleBar.activeForeground": "#FFF0F0",
+    "titleBar.inactiveBackground": "#612121",
+    "titleBar.inactiveForeground": "#f5a5a5"
   }
 }

docs/package.json

@@ -12,31 +12,31 @@
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
     "@algolia/autocomplete-core": "^1.17.4",
-    "@headlessui/react": "^2.1.8",
-    "@headlessui/tailwindcss": "^0.2.0",
-    "@heroicons/react": "^2.1.3",
+    "@headlessui/react": "^2.2.0",
+    "@headlessui/tailwindcss": "^0.2.1",
+    "@heroicons/react": "^2.2.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.11",
-    "@scalar/api-reference-react": "^0.3.37",
+    "@next/mdx": "^15.1.3",
+    "@scalar/api-reference-react": "^0.4.8",
+    "@shikijs/transformers": "^1.17.5",
     "@sindresorhus/slugify": "^2.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/mdast": "^4.0.4",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^20.14.0",
+    "@types/node": "^22.10.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/react-highlight-words": "^0.20.0",
     "@uploadthing/react": "workspace:*",
     "acorn": "^8.12.1",
-    "autoprefixer": "^10.4.19",
     "clsx": "^2.1.0",
     "fast-glob": "^3.3.2",
     "flexsearch": "^0.7.43",
-    "framer-motion": "^11.5.4",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.4",
-    "next": "14.2.11",
+    "motion": "^12.0.0-alpha.2",
+    "next": "15.1.3",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.3.0",
     "next-view-transitions": "^0.3.0",
@@ -49,24 +49,16 @@
     "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.1",
-    "typescript": "^5.5.2",
+    "tailwindcss": "^3.4.16",
+    "typescript": "5.7.2",
     "unified": "^11.0.5",
     "unist-util-filter": "^5.0.1",
     "unist-util-visit": "^5.0.0",
     "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": "pnpm@9.6.0"
+  }
 }

docs/postcss.config.cjs → docs/postcss.config.js

@@ -1,6 +1,5 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
   },
 };

docs/src/app/(docs)/api-reference/openapi-spec/scalar-client.tsx

@@ -6,6 +6,7 @@ import { ApiReferenceReact } from "@scalar/api-reference-react";
 import { useTheme } from "next-themes";
 
 const specUrl = "https://api.uploadthing.com/openapi-spec.json";
+// const specUrl = "https://api.ut-staging.com/openapi-spec.json";
 
 const useMutationObserver = (
   ref: RefObject<HTMLElement>,

docs/src/app/(docs)/api-reference/server/page.mdx

@@ -222,10 +222,10 @@ Environment variables follows the naming convention of `UPLOADTHING_<NAME>`
 
 <Properties>
   <Property name="callbackUrl" type="string" since="6.0">
-    The URL to where your route handler is hosted. This is called via webhook
-    after your file is uploaded. UploadThing attempts to automatically detect
-    this value based on the request URL and headers. You can override this if
-    the automatic detection fails.
+    The full, absolute URL to where your route handler is hosted. This is called
+    via webhook after your file is uploaded. UploadThing attempts to
+    automatically detect this value based on the request URL and headers. You
+    can override this if the automatic detection fails.
   </Property>
   <Property
     name="token"

docs/src/app/(docs)/api-reference/ut-api/page.mdx

@@ -32,16 +32,18 @@ To get started, initialize an instance of `UTApi`.
 ```ts {{ title: "~/server/uploadthing.ts" }}
 import { UTApi } from "uploadthing/server";
 
-export const utapi = new UTApi();
+export const utapi = new UTApi({
+  // ...options,
+});
 ```
 
 ### Options
 
-You can configure the SDK either by passing a config object to the
-`createRouteHandler` function, or by setting them as environment variables.
-Environment variables follows the naming convention of `UPLOADTHING_<NAME>`
-,where `<NAME>` is the name of the config option in constant case, e.g.
-`UPLOADTHING_LOG_LEVEL`. If both are set, the config object takes precedence.
+You can configure the SDK either by passing them as options to the constructor,
+or by setting them as environment variables. Environment variables follow the
+naming convention of `UPLOADTHING_<NAME>` ,where `<NAME>` is the name of the
+config option in constant case, e.g. `UPLOADTHING_LOG_LEVEL`. If both are set,
+the config object takes precedence.
 
 <Properties>
   <Property
@@ -355,6 +357,14 @@ Additionally, you may pass some options as a second argument:
 all files that have been uploaded to the application your API key corresponds
 to.
 
+<Note>
+  We do not recommend using this as your primary data source. Instead, we
+  recommend storing the file metadata (key, url, etc) in your database. This
+  will reduce latency as well as support any query your application might need.
+  The `listFiles` method is best suited for administrative tasks, one-time data
+  synchronization, or debugging purposes.
+</Note>
+
 ```ts
 import { utapi } from "~/server/uploadthing.ts";
 

docs/src/app/(docs)/backend-adapters/express/page.mdx

@@ -40,6 +40,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -52,10 +54,15 @@ import { createUploadthing, type FileRouter } from "uploadthing/express";
 const f = createUploadthing();
 
 export const uploadRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
   imageUploader: f({
     image: {
+      /**
+       * For full list of options and defaults and defaults, see the File Route API reference
+       * @see https://docs.uploadthing.com/file-routes#route-config
+       */
       maxFileSize: "4MB",
-      maxFileCount: 4,
+      maxFileCount: 1,
     },
   }).onUploadComplete((data) => {
     console.log("upload completed", data);

docs/src/app/(docs)/backend-adapters/fastify/page.mdx

@@ -40,6 +40,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -52,10 +54,15 @@ import { createUploadthing, type FileRouter } from "uploadthing/fastify";
 const f = createUploadthing();
 
 export const uploadRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
   imageUploader: f({
     image: {
+      /**
+       * For full list of options and defaults, see the File Route API reference
+       * @see https://docs.uploadthing.com/file-routes#route-config
+       */
       maxFileSize: "4MB",
-      maxFileCount: 4,
+      maxFileCount: 1,
     },
   }).onUploadComplete((data) => {
     console.log("upload completed", data);

docs/src/app/(docs)/backend-adapters/fetch/page.mdx

@@ -42,6 +42,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -54,10 +56,15 @@ import { createUploadthing, type FileRouter } from "uploadthing/server";
 const f = createUploadthing();
 
 export const uploadRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
   imageUploader: f({
     image: {
+      /**
+       * For full list of options and defaults, see the File Route API reference
+       * @see https://docs.uploadthing.com/file-routes#route-config
+       */
       maxFileSize: "4MB",
-      maxFileCount: 4,
+      maxFileCount: 1,
     },
   }).onUploadComplete((data) => {
     console.log("upload completed", data);

docs/src/app/(docs)/backend-adapters/h3/page.mdx

@@ -44,6 +44,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -56,10 +58,15 @@ import { createUploadthing, type FileRouter } from "uploadthing/h3";
 const f = createUploadthing();
 
 export const uploadRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
   imageUploader: f({
     image: {
+      /**
+       * For full list of options and defaults, see the File Route API reference
+       * @see https://docs.uploadthing.com/file-routes#route-config
+       */
       maxFileSize: "4MB",
-      maxFileCount: 4,
+      maxFileCount: 1,
     },
   }).onUploadComplete((data) => {
     console.log("upload completed", data);