fix(file-uploader): FileUploader change detail should be File[] instead of FileList (#1117)

Fixes #1112

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 |
+| Event name | Type       | Detail              |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :------------------ |
-| keydown    | forwarded | --     |
+| change     | dispatched | <code>File[]</code> |
-| change     | forwarded | --     |
+| keydown    | forwarded  | --                  |
-| click      | forwarded | --     |
+| click      | forwarded  | --                  |
 
 ## `FileUploaderDropContainer`
 

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": [],

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 }) => {
+    on:change="{(e) => {
-      files = [...target.files];
+      files = e.detail;
     }}"
   />
   <div class:bx--file-container="{true}">

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 }) => {

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" />

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"];
   },
   {}

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: {} }