feat(file-uploader-button): support files prop (#1120)

Closes #1116

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           |

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

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 = [];

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;
+    files = [...target.files];
-    const length = files.length;
+
     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 }) => {

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[];

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