From bf85af2c81a07209d8d42b3c7c67424ea06f77ad Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 21 Feb 2022 08:48:39 -0800
Subject: [PATCH] feat(file-uploader-button): support `files` prop

Closes #1116
---
 src/FileUploader/FileUploaderButton.svelte | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index 7bc932e9..317617e5 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -9,6 +9,12 @@
    */
   export let accept = [];
 
+  /**
+   * Obtain the uploaded file names
+   * @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 }) => {