fix(file-upload): fix opening the system file picker multiple times o…

…n browsers other than Chrome
chakra-ui · Sep 13, 2023 · 15f9daa · 15f9daa
1 parent 488b2ed
commit 15f9daa
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 36 deletions.
diff --git a/.xstate/file-upload.js b/.xstate/file-upload.js
@@ -13,6 +13,7 @@ const fetchMachine = createMachine({
   id: "fileupload",
   initial: "idle",
   context: {
+    "!isWithinRange": false,
     "!isWithinRange": false
   },
   on: {
@@ -31,8 +32,12 @@ const fetchMachine = createMachine({
   states: {
     idle: {
       on: {
-        OPEN: "open",
-        "DROPZONE.CLICK": "open",
+        OPEN: {
+          actions: ["openFilePicker"]
+        },
+        "DROPZONE.CLICK": {
+          actions: ["openFilePicker"]
+        },
         "DROPZONE.FOCUS": "focused",
         "DROPZONE.DRAG_OVER": [{
           cond: "!isWithinRange",
@@ -45,10 +50,19 @@ const fetchMachine = createMachine({
     },
     focused: {
       on: {
-        OPEN: "open",
-        "DROPZONE.CLICK": "open",
-        "DROPZONE.ENTER": "open",
-        "DROPZONE.BLUR": "idle"
+        OPEN: {
+          actions: ["openFilePicker"]
+        },
+        "DROPZONE.CLICK": {
+          actions: ["openFilePicker"]
+        },
+        "DROPZONE.DRAG_OVER": [{
+          cond: "!isWithinRange",
+          target: "dragging",
+          actions: ["setInvalid"]
+        }, {
+          target: "dragging"
+        }]
       }
     },
     dragging: {
@@ -62,13 +76,6 @@ const fetchMachine = createMachine({
           actions: ["clearInvalid"]
         }
       }
-    },
-    open: {
-      activities: ["trackWindowFocus"],
-      entry: ["openFilePicker"],
-      on: {
-        CLOSE: "idle"
-      }
     }
   }
 }, {

diff --git a/packages/machines/file-upload/src/file-upload.machine.ts b/packages/machines/file-upload/src/file-upload.machine.ts
@@ -38,8 +38,12 @@ export function machine(userContext: UserDefinedContext) {
       states: {
         idle: {
           on: {
-            OPEN: "open",
-            "DROPZONE.CLICK": "open",
+            OPEN: {
+              actions: ["openFilePicker"],
+            },
+            "DROPZONE.CLICK": {
+              actions: ["openFilePicker"],
+            },
             "DROPZONE.FOCUS": "focused",
             "DROPZONE.DRAG_OVER": [
               {
@@ -53,10 +57,20 @@ export function machine(userContext: UserDefinedContext) {
         },
         focused: {
           on: {
-            OPEN: "open",
-            "DROPZONE.CLICK": "open",
-            "DROPZONE.ENTER": "open",
-            "DROPZONE.BLUR": "idle",
+            OPEN: {
+              actions: ["openFilePicker"],
+            },
+            "DROPZONE.CLICK": {
+              actions: ["openFilePicker"],
+            },
+            "DROPZONE.DRAG_OVER": [
+              {
+                guard: not("isWithinRange"),
+                target: "dragging",
+                actions: ["setInvalid"],
+              },
+              { target: "dragging" },
+            ],
           },
         },
         dragging: {
@@ -71,29 +85,12 @@ export function machine(userContext: UserDefinedContext) {
             },
           },
         },
-        open: {
-          activities: ["trackWindowFocus"],
-          entry: ["openFilePicker"],
-          on: {
-            CLOSE: "idle",
-          },
-        },
       },
     },
     {
       guards: {
         isWithinRange: (ctx, evt) => isFilesWithinRange(ctx, evt.count),
       },
-      activities: {
-        trackWindowFocus(ctx, _evt, { send }) {
-          const win = dom.getWin(ctx)
-          const onWindowFocus = () => {
-            raf(() => send("CLOSE"))
-          }
-          win.addEventListener("focus", onWindowFocus)
-          return () => win.removeEventListener("focus", onWindowFocus)
-        },
-      },
       actions: {
         openFilePicker(ctx) {
           raf(() => {