nits

Author: juliusmarminge

examples/profile-picture/package.json

@@ -16,7 +16,7 @@
     "@auth/drizzle-adapter": "^1.2.0",
     "@libsql/client": "^0.14.0",
     "@uploadthing/react": "7.3.0",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "client-only": "^0.0.1",
     "drizzle-orm": "^0.38.3",
     "lucide-react": "^0.469.0",

examples/with-novel/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@tailwindcss/typography": "^0.5.15",
     "@uploadthing/react": "7.3.0",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.469.0",
     "next": "15.3.1",

packages/uploadthing/package.json

@@ -146,9 +146,9 @@
   },
   "scripts": {
     "lint": "eslint src test --max-warnings 0",
-    "build": "NODE_OPTIONS='--max_old_space_size=8192' bunchee --tsconfig tsconfig.build.json && cp src/tw/v4.css tw/v4.css",
+    "build": "NODE_OPTIONS='--max_old_space_size=16384' bunchee --tsconfig tsconfig.build.json && cp src/tw/v4.css tw/v4.css",
     "clean": "git clean -xdf client express fastify h3 internal next next-legacy server tw node_modules",
-    "dev": "NODE_OPTIONS='--max_old_space_size=8192' bunchee --tsconfig tsconfig.build.json --no-clean && cp src/tw/v4.css tw/v4.css",
+    "dev": "NODE_OPTIONS='--max_old_space_size=16384' bunchee --tsconfig tsconfig.build.json --no-clean && cp src/tw/v4.css tw/v4.css",
     "prepack": "bun ../../.github/replace-workspace-protocol.ts",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"

packages/uploadthing/src/client-future.ts

@@ -162,7 +162,7 @@ export const future_genUploader = <TRouter extends FileRouter>(
       const files = Arr.ensure(file ?? options.files);
       for (const file of files) {
         const upload = uploads.get(file);
-        if (!upload) return;
+        if (!upload) throw "No upload found";
 
         if (upload.deferred.ac.signal.aborted === false) {
           // Ensure the upload is paused

packages/uploadthing/src/client.ts

@@ -14,7 +14,6 @@ import {
 } from "@uploadthing/shared";
 
 import * as pkgJson from "../package.json";
-import * as Future from "./_internal/client-future";
 import type { Deferred } from "./_internal/deferred";
 import { createDeferred } from "./_internal/deferred";
 import { uploadFile, uploadFilesInternal } from "./_internal/upload-browser";
@@ -51,8 +50,6 @@ export {
   UploadPausedError,
 } from "@uploadthing/shared";
 
-export { Future };
-
 /**
  * Validate that a file is of a valid type given a route config
  * @public

packages/uploadthing/turbo.json

@@ -5,6 +5,7 @@
     "build": {
       "outputs": [
         "client/**",
+        "client-future/**",
         "dist/**",
         "effect-platform/**",
         "express/**",

playground/app/api/uploadthing/route.ts

@@ -14,7 +14,7 @@ import { getSession } from "../../../lib/data";
 const fileRoute = createUploadthing();
 
 export const uploadRouter = {
-  anything: fileRoute({
+  anyPrivate: fileRoute({
     blob: { maxFileSize: "256MB", maxFileCount: 10, acl: "private" },
   })
     .input(z.object({}))

playground/app/future/page.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useTransition } from "react";
 
-import { Future } from "uploadthing/client";
+import { AnyFile } from "uploadthing/client-future";
 
 import { future_createUpload, future_uploadFiles } from "../../lib/uploadthing";
 import { UploadRouter } from "../api/uploadthing/route";
 
 function AsyncUploader() {
-  const [files, setFiles] = useState<
-    Future.AnyFile<UploadRouter["anything"]>[]
-  >([]);
+  const [files, setFiles] = useState<AnyFile<UploadRouter["anyPrivate"]>[]>([]);
 
   return (
     <div className="mx-auto max-w-2xl p-8">
@@ -20,7 +18,7 @@ function AsyncUploader() {
           const files = formData.getAll("files") as File[];
           console.log("SUBMITTED", files);
 
-          const result = await future_uploadFiles("anything", {
+          const result = await future_uploadFiles("anyPrivate", {
             files,
             onEvent: (event) => {
               console.log("EVENT", event);
@@ -54,49 +52,52 @@ function AsyncUploader() {
 }
 
 function ControlledUploader() {
-  const [files, setFiles] = useState<
-    Future.AnyFile<UploadRouter["anything"]>[]
-  >([]);
+  const [files, setFiles] = useState<AnyFile<UploadRouter["anyPrivate"]>[]>([]);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [uploadControls, setUploadControls] = useState<Awaited<
     ReturnType<typeof future_createUpload>
   > | null>(null);
   const [isUploading, setIsUploading] = useState(false);
+  const [isPending, startTransition] = useTransition();
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
       setSelectedFiles(Array.from(e.target.files));
     }
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (selectedFiles.length === 0) return;
 
-    setIsUploading(true);
+    startTransition(async () => {
+      setIsUploading(true);
 
-    // Create uploads for each file
-    const controls = await future_createUpload("anything", {
-      files: selectedFiles,
-      onEvent: (event) => {
-        console.log("EVENT", event);
-        setFiles([...event.files]);
-      },
-      input: {},
-    });
+      // Create uploads for each file
+      const controls = await future_createUpload("anyPrivate", {
+        files: selectedFiles,
+        onEvent: (event) => {
+          console.log("EVENT", event);
+          setFiles([...event.files]);
+        },
+        input: {},
+      });
 
-    setUploadControls(controls);
+      setUploadControls(controls);
+    });
   };
 
-  const handleComplete = async () => {
+  const handleComplete = () => {
     if (uploadControls?.done) {
-      const result = await uploadControls.done();
-      console.log("COMPLETE", result);
-      setIsUploading(false);
-      setSelectedFiles([]);
-      setFiles([]);
-      setUploadControls(null);
-      alert("Upload complete!");
+      startTransition(async () => {
+        const result = await uploadControls.done();
+        console.log("COMPLETE", result);
+        setIsUploading(false);
+        setSelectedFiles([]);
+        setFiles([]);
+        setUploadControls(null);
+        alert("Upload complete!");
+      });
     }
   };
 
@@ -121,8 +122,9 @@ function ControlledUploader() {
           {isUploading && uploadControls && (
             <button
               type="button"
-              className="inline-flex rounded bg-green-500 px-4 py-2 text-black transition-colors hover:bg-green-600"
+              className="inline-flex rounded bg-green-500 px-4 py-2 text-black transition-colors hover:bg-green-600 disabled:opacity-50"
               onClick={handleComplete}
+              disabled={isPending}
             >
               Complete Upload
             </button>

playground/components/fieldset.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import cx from "clsx";
+import { cx } from "class-variance-authority";
 
 export function Input({
   className,

playground/components/file-card.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useTransition } from "react";
-import cx from "clsx";
+import { cx } from "class-variance-authority";
 
 import { deleteFile, getFileUrl } from "../lib/actions";
 import { ListedFileInfo } from "../lib/data";