From 7586b2a10fa786a810adf003edea8d4fd40c8185 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Mon, 21 Feb 2022 13:32:05 -0800
Subject: [PATCH] feat(file-uploader-button): support `files` prop (#1120)

Closes #1116
---
 COMPONENT_INDEX.md                            |  3 ++-
 docs/src/COMPONENT_API.json                   | 13 +++++++++++-
 src/FileUploader/FileUploader.svelte          |  2 +-
 src/FileUploader/FileUploaderButton.svelte    | 21 +++++++++++++++----
 types/FileUploader/FileUploader.svelte.d.ts   |  2 +-
 .../FileUploaderButton.svelte.d.ts            |  6 ++++++
 6 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 2e7595ed..f1929740 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1263,7 +1263,7 @@ None.
 
 | Prop name        | Kind               | Reactive | Type                                                                                       | Default value                           | Description                                                 |
 | :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | ----------------------------------------------------------- |
-| files            | <code>let</code>   | Yes      | <code>File[]</code>                                                                        | <code>[]</code>                         | Obtain the uploaded file names                              |
+| files            | <code>let</code>   | Yes      | <code>File[]</code>                                                                        | <code>[]</code>                         | Obtain a reference to the uploaded files                    |
 | 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                       |
@@ -1300,6 +1300,7 @@ None.
 | :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
 | ref                 | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                                                  | <code>null</code>                                | Obtain a reference to the input HTML element |
 | labelText           | <code>let</code> | Yes      | <code>string</code>                                                                        | <code>"Add file"</code>                          | Specify the label text                       |
+| files               | <code>let</code> | Yes      | <code>File[]</code>                                                                        | <code>[]</code>                                  | Obtain a reference to the uploaded files     |
 | 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        |
 | disabled            | <code>let</code> | No       | <code>boolean</code>                                                                       | <code>false</code>                               | Set to `true` to disable the input           |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 7e30bf03..b744a5ed 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -3481,7 +3481,7 @@
         {
           "name": "files",
           "kind": "let",
-          "description": "Obtain the uploaded file names",
+          "description": "Obtain a reference to the uploaded files",
           "type": "File[]",
           "value": "[]",
           "isFunction": false,
@@ -3607,6 +3607,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "files",
+          "kind": "let",
+          "description": "Obtain a reference to the uploaded files",
+          "type": "File[]",
+          "value": "[]",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
         {
           "name": "multiple",
           "kind": "let",
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index fcb9c98a..05930c09 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -18,7 +18,7 @@
   export let accept = [];
 
   /**
-   * Obtain the uploaded file names
+   * Obtain a reference to the uploaded files
    * @type {File[]}
    */
   export let files = [];
diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index 7bc932e9..789ebb7f 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -9,6 +9,12 @@
    */
   export let accept = [];
 
+  /**
+   * Obtain a reference to the uploaded files
+   * @type {File[]}
+   */
+  export let files = [];
+
   /** Set to `true` to allow multiple files */
   export let multiple = false;
 
@@ -45,6 +51,13 @@
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
+
+  let initialLabelText = labelText;
+
+  $: if (ref && files.length === 0) {
+    labelText = initialLabelText;
+    ref.value = null;
+  }
 </script>
 
 <label
@@ -80,13 +93,13 @@
   class:bx--visually-hidden="{true}"
   {...$$restProps}
   on:change|stopPropagation="{({ target }) => {
-    const files = target.files;
-    const length = files.length;
+    files = [...target.files];
+
     if (files && !disableLabelChanges) {
-      labelText = length > 1 ? `${length} files` : files[0].name;
+      labelText = files.length > 1 ? `${files.length} files` : files[0].name;
     }
 
-    dispatch('change', [...files]);
+    dispatch('change', files);
   }}"
   on:click
   on:click="{({ target }) => {
diff --git a/types/FileUploader/FileUploader.svelte.d.ts b/types/FileUploader/FileUploader.svelte.d.ts
index d4fda031..39366c2d 100644
--- a/types/FileUploader/FileUploader.svelte.d.ts
+++ b/types/FileUploader/FileUploader.svelte.d.ts
@@ -16,7 +16,7 @@ export interface FileUploaderProps
   accept?: string[];
 
   /**
-   * Obtain the uploaded file names
+   * Obtain a reference to the uploaded files
    * @default []
    */
   files?: File[];
diff --git a/types/FileUploader/FileUploaderButton.svelte.d.ts b/types/FileUploader/FileUploaderButton.svelte.d.ts
index 86b58f80..5daf2c33 100644
--- a/types/FileUploader/FileUploaderButton.svelte.d.ts
+++ b/types/FileUploader/FileUploaderButton.svelte.d.ts
@@ -9,6 +9,12 @@ export interface FileUploaderButtonProps
    */
   accept?: string[];
 
+  /**
+   * Obtain a reference to the uploaded files
+   * @default []
+   */
+  files?: File[];
+
   /**
    * Set to `true` to allow multiple files
    * @default false