From 6dc47c377a0ca492a15b4b55f17a304878a15993 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 21 Feb 2022 14:06:29 -0800
Subject: [PATCH] docs(file-uploader): add "Clear files" example

---
 docs/src/pages/components/FileUploader.svx    | 13 +++++++-
 .../FileUploaderClearFiles.svelte             | 32 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte

diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx
index cb7390a3..b8aa9ba6 100644
--- a/docs/src/pages/components/FileUploader.svx
+++ b/docs/src/pages/components/FileUploader.svx
@@ -3,7 +3,7 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
 ---
 
 <script>
-  import { FileUploaderButton, FileUploader, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton } from "carbon-components-svelte";
+  import { FileUploaderButton, FileUploader, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, UnorderedList, ListItem } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -15,6 +15,17 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
 
 <FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
 
+### Clear files
+
+There are two ways to clear files in `FileUploader`:
+
+<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+  <ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
+  <ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
+</UnorderedList>
+
+<FileSource src="/framed/FileUploader/FileUploaderClearFiles" />
+
 ### File uploader (disabled state)
 
 <FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
diff --git a/docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte b/docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte
new file mode 100644
index 00000000..9b6aba34
--- /dev/null
+++ b/docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte
@@ -0,0 +1,32 @@
+<script>
+  import { FileUploader, Button } from "carbon-components-svelte";
+
+  let fileUploader;
+  let files = [];
+</script>
+
+<FileUploader
+  bind:this="{fileUploader}"
+  multiple
+  labelTitle="Upload files"
+  buttonLabel="Add files"
+  status="complete"
+  bind:files
+/>
+
+<br />
+
+<Button
+  kind="tertiary"
+  disabled="{!files.length}"
+  on:click="{fileUploader.clearFiles}"
+>
+  Clear (programmatic)
+</Button>
+<Button
+  kind="tertiary"
+  disabled="{!files.length}"
+  on:click="{() => (files = [])}"
+>
+  Clear (two-way binding)
+</Button>