fix: dropzone behavior (#980)

pingdotgg · Oct 7, 2024 · e53bc01 · e53bc01
1 parent d4d453d
commit e53bc01
Show file tree

Hide file tree

Showing 23 changed files with 729 additions and 683 deletions.
diff --git a/.changeset/honest-scissors-shave.md b/.changeset/honest-scissors-shave.md
@@ -0,0 +1,8 @@
+---
+"@uploadthing/svelte": patch
+"@uploadthing/react": patch
+"@uploadthing/solid": patch
+"@uploadthing/vue": patch
+---
+
+fix: file picker would open twice when clicking the input element on the dropzone
diff --git a/examples/backend-adapters/client-vue/src/App.vue b/examples/backend-adapters/client-vue/src/App.vue
@@ -21,6 +21,9 @@ function alert(message: string) {
             console.log('uploaded', file);
             alert('Upload complete');
           },
+          onUploadAborted: () => {
+            alert('Upload Aborted');
+          },
           onUploadError: (error) => {
             console.error(error, error.cause);
             alert('Upload failed');
@@ -38,6 +41,9 @@ function alert(message: string) {
             console.log('uploaded', file);
             alert('Upload complete');
           },
+          onUploadAborted: () => {
+            alert('Upload Aborted');
+          },
           onUploadError: (error) => {
             console.error(error, error.cause);
             alert('Upload failed');

diff --git a/...les/minimal-solidstart/tailwind.config.js → ...les/minimal-solidstart/tailwind.config.ts b/...les/minimal-solidstart/tailwind.config.js → ...les/minimal-solidstart/tailwind.config.ts
@@ -1,6 +1,5 @@
 import { withUt } from "uploadthing/tw";
 
-/** @type {import('tailwindcss').Config} */
 export default withUt({
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {

diff --git a/examples/minimal-solidstart/tsconfig.json b/examples/minimal-solidstart/tsconfig.json
@@ -1,10 +1,8 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
+    "module": "Preserve",
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
     "allowJs": true,

diff --git a/examples/minimal-sveltekit/src/routes/+page.svelte b/examples/minimal-sveltekit/src/routes/+page.svelte
@@ -7,6 +7,9 @@
   import "@uploadthing/svelte/styles.css";
 
   const uploader = createUploader("videoAndImage", {
+    onUploadAborted: () => {
+      alert("Upload Aborted");
+    },
     onClientUploadComplete: (res) => {
       console.log(`onClientUploadComplete`, res);
       alert("Upload Completed");

diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx
@@ -93,7 +93,6 @@ export function UploadButton<
   // since the ErrorMessage messes it up otherwise
   const $props = props as unknown as UploadButtonProps<TRouter, TEndpoint> &
     UploadThingInternalProps;
-  const fileRouteInput = "input" in $props ? $props.input : undefined;
 
   const {
     mode = "auto",
@@ -103,7 +102,6 @@ export function UploadButton<
   const acRef = useRef(new AbortController());
 
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const labelRef = useRef<HTMLLabelElement>(null);
   const [uploadProgress, setUploadProgress] = useState(
     $props.__internal_upload_progress ?? 0,
   );
@@ -132,21 +130,49 @@ export function UploadButton<
       onBeforeUploadBegin: $props.onBeforeUploadBegin,
     },
   );
+  const { fileTypes, multiple } = generatePermittedFileTypes(routeConfig);
+
+  const disabled = !!($props.__internal_button_disabled ?? $props.disabled);
+  const state = (() => {
+    const ready = $props.__internal_state === "ready" || fileTypes.length > 0;
+
+    if ($props.__internal_state) return $props.__internal_state;
+    if (disabled) return "disabled";
+    if (!ready) return "readying";
+    if (ready && !isUploading) return "ready";
+    return "uploading";
+  })();
 
   const uploadFiles = useCallback(
     (files: File[]) => {
-      startUpload(files, fileRouteInput).catch((e) => {
+      const input = "input" in $props ? $props.input : undefined;
+      startUpload(files, input).catch((e) => {
         if (e instanceof UploadAbortedError) {
           void $props.onUploadAborted?.();
         } else {
           throw e;
         }
       });
     },
-    [$props, startUpload, fileRouteInput],
+    [$props, startUpload],
   );
 
-  const { fileTypes, multiple } = generatePermittedFileTypes(routeConfig);
+  const onUploadClick = (e: React.MouseEvent) => {
+    if (state === "uploading") {
+      e.preventDefault();
+      e.stopPropagation();
+
+      acRef.current.abort();
+      acRef.current = new AbortController();
+      return;
+    }
+    if (mode === "manual" && files.length > 0) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      uploadFiles(files);
+    }
+  };
 
   const inputProps = useMemo(
     () => ({
@@ -165,24 +191,14 @@ export function UploadButton<
           return;
         }
 
-        void uploadFiles(selectedFiles);
+        uploadFiles(selectedFiles);
       },
-      disabled: fileTypes.length === 0,
-      tabIndex: fileTypes.length === 0 ? -1 : 0,
+      disabled,
+      tabIndex: disabled ? -1 : 0,
     }),
-    [$props, fileTypes, mode, multiple, uploadFiles],
+    [$props, disabled, fileTypes, mode, multiple, uploadFiles],
   );
 
-  if ($props.__internal_button_disabled) inputProps.disabled = true;
-  if ($props.disabled) inputProps.disabled = true;
-
-  const state = (() => {
-    if ($props.__internal_state) return $props.__internal_state;
-    if (inputProps.disabled) return "disabled";
-    if (!inputProps.disabled && !isUploading) return "ready";
-    return "uploading";
-  })();
-
   usePaste((event) => {
     if (!appendOnPaste) return;
     if (document.activeElement !== fileInputRef.current) return;
@@ -199,7 +215,7 @@ export function UploadButton<
       return filesToUpload;
     });
 
-    if (mode === "auto") void uploadFiles(files);
+    if (mode === "auto") uploadFiles(files);
   });
 
   const styleFieldArg = {
@@ -221,7 +237,7 @@ export function UploadButton<
         return "Loading...";
       }
       case "uploading": {
-        if (uploadProgress === 100) return <Spinner />;
+        if (uploadProgress >= 100) return <Spinner />;
         return (
           <span className="z-50">
             <span className="block group-hover:hidden">{uploadProgress}%</span>
@@ -305,23 +321,7 @@ export function UploadButton<
         style={styleFieldToCssObject($props.appearance?.button, styleFieldArg)}
         data-state={state}
         data-ut-element="button"
-        ref={labelRef}
-        onClick={(e) => {
-          if (state === "uploading") {
-            e.preventDefault();
-            e.stopPropagation();
-
-            acRef.current.abort();
-            acRef.current = new AbortController();
-            return;
-          }
-          if (mode === "manual" && files.length > 0) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            uploadFiles(files);
-          }
-        }}
+        onClick={onUploadClick}
       >
         <input {...inputProps} className="sr-only" />
         {renderButton()}