feat: getInputProps

examples/with-tailwindcss/src/app/my-upload-button.tsx

@@ -0,0 +1,13 @@
+import { useUploadThing } from "~/utils/uploadthing";
+
+export const MyUploadButton = (props: {}) => {
+  const { getInputProps, files, isUploading, progresses } =
+    useUploadThing("videoAndImage");
+
+  return (
+    <label className="cursor-pointer rounded bg-blue-500 px-8 py-2 text-white hover:bg-blue-600">
+      {files.length ? "Upload files" : "Select files to upload"}
+      <input {...getInputProps({ mode: "manual" })} className="sr-only" />
+    </label>
+  );
+};

examples/with-tailwindcss/src/app/page.tsx

@@ -5,6 +5,7 @@ import {
   UploadDropzone,
   useUploadThing,
 } from "~/utils/uploadthing";
+import { MyUploadButton } from "./my-upload-button";
 
 export default function Home() {
   const { startUpload } = useUploadThing("videoAndImage", {
@@ -15,6 +16,7 @@ export default function Home() {
 
   return (
     <main className="mx-auto flex min-h-screen max-w-sm flex-col items-center justify-center gap-4 py-24">
+      <MyUploadButton />
       <UploadButton
         endpoint="videoAndImage"
         onClientUploadComplete={(res) => {
@@ -24,6 +26,10 @@ export default function Home() {
         onUploadBegin={() => {
           console.log("upload begin");
         }}
+        config={{
+          appendOnPaste: true,
+          mode: "manual",
+        }}
       />
       <UploadDropzone
         className="ut-label:text-lg ut-allowed-content:ut-uploading:text-red-300 ut-allowed-content:text-white w-full bg-slate-800"

packages/dropzone/package.json

@@ -76,6 +76,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@uploadthing/shared": "workspace:*",
+    "effect": "3.4.2",
     "file-selector": "^0.6.0"
   },
   "devDependencies": {

packages/dropzone/src/core.ts

@@ -4,6 +4,14 @@
  * See original source here: https://github.com/react-dropzone/react-dropzone
  * The original package is licensed under the MIT license.
  */
+import * as Micro from "effect/Micro";
+
+import type { ExpandedRouteConfig, FileWithState } from "@uploadthing/shared";
+import {
+  fileSizeToBytes,
+  generateClientDropzoneAccept,
+  generatePermittedFileTypes,
+} from "@uploadthing/shared";
 
 import type { AcceptProp, DropzoneState } from "./types";
 
@@ -48,7 +56,8 @@ export const isPropagationStopped = (
 
 // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
 // that MIME type will always be accepted
-export function isFileAccepted(file: File, accept: string | string[]) {
+export function isFileAccepted(file: File, accept: string | undefined) {
+  if (!accept) return true;
   return file.type === "application/x-moz-file" || accepts(file, accept);
 }
 
@@ -89,7 +98,7 @@ export function allFilesAccepted({
   maxFiles,
 }: {
   files: File[];
-  accept: string | string[];
+  accept: string | undefined;
   minSize: number;
   maxSize: number;
   multiple: boolean;
@@ -141,7 +150,7 @@ function isExt(v: string) {
 /**
  * Convert the `{accept}` dropzone prop to an array of MIME types/extensions.
  */
-export function acceptPropAsAcceptAttr(accept?: AcceptProp) {
+function acceptPropAsAcceptAttr(accept?: AcceptProp) {
   if (isDefined(accept)) {
     return (
       Object.entries(accept)
@@ -159,6 +168,33 @@ export function noop() {
   // noop
 }
 
+export const routeConfigToDropzoneProps = (
+  routeConfig: ExpandedRouteConfig | undefined,
+) => {
+  const { fileTypes, multiple } = generatePermittedFileTypes(routeConfig);
+
+  const { maxFiles, maxSize } = Object.values(routeConfig ?? {}).reduce(
+    (acc, curr) => {
+      // Don't think it makes sense to have a minFileCount since they can select many times
+      // acc.minFiles = Math.min(acc.minFiles, curr.minFileCount);
+      acc.maxFiles = Math.max(acc.maxFiles, curr.maxFileCount);
+      acc.maxSize = Math.max(
+        acc.maxSize,
+        Micro.runSync(fileSizeToBytes(curr.maxFileSize)),
+      );
+      return acc;
+    },
+    { maxFiles: 0, maxSize: 0 },
+  );
+
+  return {
+    multiple,
+    accept: acceptPropAsAcceptAttr(generateClientDropzoneAccept(fileTypes)),
+    maxFiles,
+    maxSize: maxSize,
+  };
+};
+
 /**
  * ================================================
  *                    Reducer
@@ -191,7 +227,7 @@ export const initialState = {
   isDragActive: false,
   isDragAccept: false,
   isDragReject: false,
-  acceptedFiles: [] as File[],
+  acceptedFiles: [] as FileWithState[],
 };
 
 export function reducer(

packages/dropzone/src/react.tsx

@@ -15,8 +15,9 @@ import type {
 import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { fromEvent } from "file-selector";
 
+import type { FileWithState } from "@uploadthing/shared";
+
 import {
-  acceptPropAsAcceptAttr,
   allFilesAccepted,
   initialState,
   isEnterOrSpace,
@@ -27,6 +28,7 @@ import {
   isValidSize,
   noop,
   reducer,
+  routeConfigToDropzoneProps,
 } from "./core";
 import type { DropzoneOptions } from "./types";
 
@@ -60,15 +62,15 @@ export type DropEvent =
  * ```
  */
 export function useDropzone({
-  accept,
+  routeConfig,
   disabled = false,
-  maxSize = Number.POSITIVE_INFINITY,
   minSize = 0,
-  multiple = true,
-  maxFiles = 0,
   onDrop,
 }: DropzoneOptions) {
-  const acceptAttr = useMemo(() => acceptPropAsAcceptAttr(accept), [accept]);
+  const { accept, multiple, maxFiles, maxSize } = useMemo(
+    () => routeConfigToDropzoneProps(routeConfig),
+    [routeConfig],
+  );
 
   const rootRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -136,7 +138,7 @@ export function useDropzone({
               fileCount > 0 &&
               allFilesAccepted({
                 files: files as File[],
-                accept: acceptAttr!,
+                accept,
                 minSize,
                 maxSize,
                 multiple,
@@ -156,7 +158,7 @@ export function useDropzone({
           .catch(noop);
       }
     },
-    [acceptAttr, maxFiles, maxSize, minSize, multiple],
+    [accept, maxFiles, maxSize, minSize, multiple],
   );
 
   const onDragOver = useCallback((event: DragEvent<HTMLElement>) => {
@@ -203,14 +205,18 @@ export function useDropzone({
 
   const setFiles = useCallback(
     (files: File[]) => {
-      const acceptedFiles: File[] = [];
+      const acceptedFiles: FileWithState[] = [];
 
       files.forEach((file) => {
-        const accepted = isFileAccepted(file, acceptAttr!);
+        const accepted = isFileAccepted(file, accept);
         const sizeMatch = isValidSize(file, minSize, maxSize);
 
         if (accepted && sizeMatch) {
-          acceptedFiles.push(file);
+          const fileWithState: FileWithState = Object.assign(file, {
+            status: "pending" as const,
+            key: null,
+          });
+          acceptedFiles.push(fileWithState);
         }
       });
 
@@ -227,7 +233,7 @@ export function useDropzone({
 
       onDrop(acceptedFiles);
     },
-    [acceptAttr, maxFiles, maxSize, minSize, multiple, onDrop],
+    [accept, maxFiles, maxSize, minSize, multiple, onDrop],
   );
 
   const onDropCb = useCallback(
@@ -241,7 +247,16 @@ export function useDropzone({
         Promise.resolve(fromEvent(event))
           .then((files) => {
             if (event.isPropagationStopped()) return;
-            setFiles(files as File[]);
+
+            console.log("files in onDrop", files);
+
+            const filesWithState = (files as File[]).map((file) =>
+              Object.assign(file, {
+                status: "pending" as const,
+                key: null,
+              }),
+            );
+            setFiles(filesWithState);
           })
           .catch(noop);
       }
@@ -323,7 +338,7 @@ export function useDropzone({
       ref: inputRef,
       type: "file",
       style: { display: "none" },
-      accept: acceptAttr,
+      accept: accept,
       multiple,
       tabIndex: -1,
       ...(!disabled
@@ -334,7 +349,7 @@ export function useDropzone({
           }
         : {}),
     }),
-    [acceptAttr, multiple, onDropCb, onInputElementClick, disabled],
+    [accept, multiple, onDropCb, onInputElementClick, disabled],
   );
 
   return {

packages/dropzone/src/solid.tsx

@@ -15,8 +15,9 @@ import {
 } from "solid-js";
 import { createStore } from "solid-js/store";
 
+import type { FileWithState } from "@uploadthing/shared";
+
 import {
-  acceptPropAsAcceptAttr,
   allFilesAccepted,
   initialState,
   isEnterOrSpace,
@@ -27,6 +28,7 @@ import {
   isValidQuantity,
   isValidSize,
   noop,
+  routeConfigToDropzoneProps,
 } from "./core";
 import type { DropzoneOptions } from "./types";
 
@@ -38,15 +40,14 @@ export function createDropzone(_props: DropzoneOptions) {
   const props = mergeProps(
     {
       disabled: false,
-      maxSize: Number.POSITIVE_INFINITY,
       minSize: 0,
-      multiple: true,
-      maxFiles: 0,
     },
     _props,
   );
 
-  const acceptAttr = createMemo(() => acceptPropAsAcceptAttr(props.accept));
+  const routeProps = createMemo(() =>
+    routeConfigToDropzoneProps(props.routeConfig),
+  );
 
   const [rootRef, setRootRef] = createSignal<HTMLElement | null>();
   const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>();
@@ -114,11 +115,8 @@ export function createDropzone(_props: DropzoneOptions) {
             fileCount > 0 &&
             allFilesAccepted({
               files: files as File[],
-              accept: acceptAttr()!,
               minSize: props.minSize,
-              maxSize: props.maxSize,
-              multiple: props.multiple,
-              maxFiles: props.maxFiles,
+              ...routeProps(),
             });
           const isDragReject = fileCount > 0 && !isDragAccept;
 
@@ -174,25 +172,34 @@ export function createDropzone(_props: DropzoneOptions) {
   };
 
   const setFiles = (files: File[]) => {
-    const acceptedFiles: File[] = [];
+    const acceptedFiles: FileWithState[] = [];
 
     files.forEach((file) => {
-      const accepted = isFileAccepted(file, acceptAttr()!);
-      const sizeMatch = isValidSize(file, props.minSize, props.maxSize);
+      const accepted = isFileAccepted(file, routeProps().accept);
+      const sizeMatch = isValidSize(file, props.minSize, routeProps().maxSize);
 
       if (accepted && sizeMatch) {
-        acceptedFiles.push(file);
+        const fileWithState: FileWithState = Object.assign(file, {
+          status: "pending" as const,
+          key: null,
+        });
+        acceptedFiles.push(fileWithState);
       }
     });
 
-    if (!isValidQuantity(acceptedFiles, props.multiple, props.maxFiles)) {
+    if (
+      !isValidQuantity(
+        acceptedFiles,
+        routeProps().multiple,
+        routeProps().maxFiles,
+      )
+    ) {
       acceptedFiles.splice(0);
     }
 
     setState({
       acceptedFiles,
     });
-
     props.onDrop?.(acceptedFiles);
   };
 
@@ -271,8 +278,8 @@ export function createDropzone(_props: DropzoneOptions) {
     ref: setInputRef,
     type: "file",
     style: { display: "none" },
-    accept: acceptAttr(),
-    multiple: props.multiple,
+    accept: routeProps().accept,
+    multiple: routeProps().multiple,
     tabIndex: -1,
     ...(!props.disabled
       ? {