From 495ae2780aa189af3623027eeca15ce89e2010cc Mon Sep 17 00:00:00 2001
From: water_lift <0xWATERx0@gmail.com>
Date: Tue, 1 Dec 2020 10:43:39 +0800
Subject: [PATCH] fix FileUploader (#437)

* fix FileUploader

* FileList -> File[]
---
 COMPONENT_INDEX.md                   | 22 +++++++++++-----------
 docs/src/COMPONENT_API.json          |  6 +++---
 src/FileUploader/FileUploader.svelte | 10 +++++-----
 types/FileUploader/FileUploader.d.ts |  6 +++---
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index addbd6e2..7bbbdc3f 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1058,7 +1058,7 @@ None.
 
 | Prop name        | Kind               | Reactive | Type                                                                                       | Default value                           | Description                                                           |
 | :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- |
-| files            | <code>let</code>   | Yes      | <code>FileList</code>                                                                      | <code>[]</code>                         | Obtain the uploaded file names                                        |
+| files            | <code>let</code>   | Yes      | <code>File[]</code>                                                                        | <code>[]</code>                         | Obtain the uploaded file names                                        |
 | status           | <code>let</code>   | No       | <code>"uploading" &#124; "edit" &#124; "complete"</code>                                   | <code>"uploading"</code>                | Specify the file uploader status                                      |
 | accept           | <code>let</code>   | No       | <code>string[]</code>                                                                      | <code>[]</code>                         | Specify the accepted file types                                       |
 | multiple         | <code>let</code>   | No       | <code>boolean</code>                                                                       | <code>false</code>                      | Set to `true` to allow multiple files                                 |
@@ -1076,16 +1076,16 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail                |
-| :--------- | :--------- | :-------------------- |
-| add        | dispatched | <code>FileList</code> |
-| remove     | dispatched | <code>FileList</code> |
-| click      | forwarded  | --                    |
-| mouseover  | forwarded  | --                    |
-| mouseenter | forwarded  | --                    |
-| mouseleave | forwarded  | --                    |
-| change     | forwarded  | --                    |
-| keydown    | forwarded  | --                    |
+| Event name | Type       | Detail              |
+| :--------- | :--------- | :------------------ |
+| add        | dispatched | <code>File[]</code> |
+| remove     | dispatched | <code>File[]</code> |
+| click      | forwarded  | --                  |
+| mouseover  | forwarded  | --                  |
+| mouseenter | forwarded  | --                  |
+| mouseleave | forwarded  | --                  |
+| change     | forwarded  | --                  |
+| keydown    | forwarded  | --                  |
 
 ## `FileUploaderButton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 799b29d9..98e83060 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -4142,7 +4142,7 @@
           "name": "files",
           "kind": "let",
           "description": "Obtain the uploaded file names",
-          "type": "FileList",
+          "type": "File[]",
           "value": "[]",
           "isFunction": false,
           "constant": false,
@@ -4231,8 +4231,8 @@
       ],
       "slots": [],
       "events": [
-        { "type": "dispatched", "name": "add", "detail": "FileList" },
-        { "type": "dispatched", "name": "remove", "detail": "FileList" },
+        { "type": "dispatched", "name": "add", "detail": "File[]" },
+        { "type": "dispatched", "name": "remove", "detail": "File[]" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 2e7e3aa6..7fecd000 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
-   * @event {FileList} add
-   * @event {FileList} remove
+   * @event {File[]} add
+   * @event {File[]} remove
    */
 
   /**
@@ -18,7 +18,7 @@
 
   /**
    * Obtain the uploaded file names
-   * @type {FileList}
+   * @type {File[]}
    */
   export let files = [];
 
@@ -95,11 +95,11 @@
     kind="{kind}"
     on:change
     on:change="{({ target }) => {
-      files = [...target.files].map(({ name }) => name);
+      files = [...target.files];
     }}"
   />
   <div class:bx--file-container="{true}">
-    {#each files as name, i (name)}
+    {#each files as { name }, i (name)}
       <span class:bx--file__selected-file="{true}">
         <p class:bx--file-filename="{true}">{name}</p>
         <span class:bx--file__state-container="{true}">
diff --git a/types/FileUploader/FileUploader.d.ts b/types/FileUploader/FileUploader.d.ts
index 2e6905ec..a17cafca 100644
--- a/types/FileUploader/FileUploader.d.ts
+++ b/types/FileUploader/FileUploader.d.ts
@@ -17,7 +17,7 @@ export interface FileUploaderProps extends svelte.JSX.HTMLAttributes<HTMLElement
    * Obtain the uploaded file names
    * @default []
    */
-  files?: FileList;
+  files?: File[];
 
   /**
    * Set to `true` to allow multiple files
@@ -73,8 +73,8 @@ export default class FileUploader {
   $$prop_def: FileUploaderProps;
   $$slot_def: {};
 
-  $on(eventname: "add", cb: (event: CustomEvent<FileList>) => void): () => void;
-  $on(eventname: "remove", cb: (event: CustomEvent<FileList>) => void): () => void;
+  $on(eventname: "add", cb: (event: CustomEvent<File[]>) => void): () => void;
+  $on(eventname: "remove", cb: (event: CustomEvent<File[]>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;