From 7602731b0bf8a2e80ab977d57d51fe43a9795de1 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Mon, 21 Feb 2022 08:34:03 -0800
Subject: [PATCH] fix(file-uploader): `FileUploader` change detail should be
 `File[]` instead of `FileList` (#1117)

Fixes #1112
---
 COMPONENT_INDEX.md                               | 12 ++++++------
 docs/src/COMPONENT_API.json                      |  8 ++------
 src/FileUploader/FileUploader.svelte             |  5 +++--
 src/FileUploader/FileUploaderButton.svelte       | 11 ++++++++++-
 tests/FileUploader.test.svelte                   | 16 +++++++++++++++-
 types/FileUploader/FileUploader.svelte.d.ts      |  2 +-
 .../FileUploader/FileUploaderButton.svelte.d.ts  |  2 +-
 7 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 1733bde4..49d2ea44 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1285,11 +1285,11 @@ None.
 | :--------- | :--------- | :------------------ |
 | add        | dispatched | <code>File[]</code> |
 | remove     | dispatched | <code>File[]</code> |
+| change     | dispatched | <code>File[]</code> |
 | click      | forwarded  | --                  |
 | mouseover  | forwarded  | --                  |
 | mouseenter | forwarded  | --                  |
 | mouseleave | forwarded  | --                  |
-| change     | forwarded  | --                  |
 | keydown    | forwarded  | --                  |
 
 ## `FileUploaderButton`
@@ -1318,11 +1318,11 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
-| :--------- | :-------- | :----- |
-| keydown    | forwarded | --     |
-| change     | forwarded | --     |
-| click      | forwarded | --     |
+| Event name | Type       | Detail              |
+| :--------- | :--------- | :------------------ |
+| change     | dispatched | <code>File[]</code> |
+| keydown    | forwarded  | --                  |
+| click      | forwarded  | --                  |
 
 ## `FileUploaderDropContainer`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index f5b856c4..d908e0c6 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -3582,15 +3582,11 @@
       "events": [
         { "type": "dispatched", "name": "add", "detail": "File[]" },
         { "type": "dispatched", "name": "remove", "detail": "File[]" },
+        { "type": "dispatched", "name": "change", "detail": "File[]" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        {
-          "type": "forwarded",
-          "name": "change",
-          "element": "FileUploaderButton"
-        },
         { "type": "forwarded", "name": "keydown", "element": "Filename" }
       ],
       "typedefs": [],
@@ -3731,8 +3727,8 @@
         }
       ],
       "events": [
+        { "type": "dispatched", "name": "change", "detail": "File[]" },
         { "type": "forwarded", "name": "keydown", "element": "label" },
-        { "type": "forwarded", "name": "change", "element": "input" },
         { "type": "forwarded", "name": "click", "element": "input" }
       ],
       "typedefs": [],
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 08147f47..bbe6fb52 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -2,6 +2,7 @@
   /**
    * @event {File[]} add
    * @event {File[]} remove
+   * @event {File[]} change
    */
 
   /**
@@ -95,8 +96,8 @@
     multiple="{multiple}"
     kind="{kind}"
     on:change
-    on:change="{({ target }) => {
-      files = [...target.files];
+    on:change="{(e) => {
+      files = e.detail;
     }}"
   />
   <div class:bx--file-container="{true}">
diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index 33cddba9..7bc932e9 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {File[]} change
+   */
+
   /**
    * Specify the accepted file types
    * @type {string[]}
@@ -37,6 +41,10 @@
 
   /** Obtain a reference to the input HTML element */
   export let ref = null;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <label
@@ -71,13 +79,14 @@
   name="{name}"
   class:bx--visually-hidden="{true}"
   {...$$restProps}
-  on:change|stopPropagation
   on:change|stopPropagation="{({ target }) => {
     const files = target.files;
     const length = files.length;
     if (files && !disableLabelChanges) {
       labelText = length > 1 ? `${length} files` : files[0].name;
     }
+
+    dispatch('change', [...files]);
   }}"
   on:click
   on:click="{({ target }) => {
diff --git a/tests/FileUploader.test.svelte b/tests/FileUploader.test.svelte
index 65ef2649..a2eb96c5 100644
--- a/tests/FileUploader.test.svelte
+++ b/tests/FileUploader.test.svelte
@@ -8,7 +8,12 @@
   } from "../types";
 </script>
 
-<FileUploaderButton labelText="Add files" />
+<FileUploaderButton
+  labelText="Add files"
+  on:change="{(e) => {
+    console.log(e.detail); // File[]
+  }}"
+/>
 
 <FileUploader
   multiple
@@ -17,6 +22,15 @@
   labelDescription="Only JPEG files are accepted."
   accept="{['.jpg', '.jpeg']}"
   status="complete"
+  on:add="{(e) => {
+    console.log(e.detail); // File[]
+  }}"
+  on:remove="{(e) => {
+    console.log(e.detail); // File[]
+  }}"
+  on:change="{(e) => {
+    console.log(e.detail); // File[]
+  }}"
 />
 
 <FileUploaderItem name="README.md" status="uploading" />
diff --git a/types/FileUploader/FileUploader.svelte.d.ts b/types/FileUploader/FileUploader.svelte.d.ts
index 8709fbab..15d7768b 100644
--- a/types/FileUploader/FileUploader.svelte.d.ts
+++ b/types/FileUploader/FileUploader.svelte.d.ts
@@ -69,11 +69,11 @@ export default class FileUploader extends SvelteComponentTyped<
   {
     add: CustomEvent<File[]>;
     remove: CustomEvent<File[]>;
+    change: CustomEvent<File[]>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
-    change: WindowEventMap["change"];
     keydown: WindowEventMap["keydown"];
   },
   {}
diff --git a/types/FileUploader/FileUploaderButton.svelte.d.ts b/types/FileUploader/FileUploaderButton.svelte.d.ts
index 10574a6d..86b58f80 100644
--- a/types/FileUploader/FileUploaderButton.svelte.d.ts
+++ b/types/FileUploader/FileUploaderButton.svelte.d.ts
@@ -73,8 +73,8 @@ export interface FileUploaderButtonProps
 export default class FileUploaderButton extends SvelteComponentTyped<
   FileUploaderButtonProps,
   {
+    change: CustomEvent<File[]>;
     keydown: WindowEventMap["keydown"];
-    change: WindowEventMap["change"];
     click: WindowEventMap["click"];
   },
   { labelText: {} }