From 9c3c6f7a7c87e594717873e9b4704e0475822c55 Mon Sep 17 00:00:00 2001
From: freddyaboulton <alfonsoboulton@gmail.com>
Date: Tue, 30 Jan 2024 11:09:59 -0500
Subject: [PATCH] Fix bug + add buggy story

---
 js/file/FileUpload.stories.svelte | 82 +++++++++++++++++++++++++++++++
 js/file/shared/FileUpload.svelte  |  2 +-
 2 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 js/file/FileUpload.stories.svelte

diff --git a/js/file/FileUpload.stories.svelte b/js/file/FileUpload.stories.svelte
new file mode 100644
index 0000000000000..b86a02958a6a9
--- /dev/null
+++ b/js/file/FileUpload.stories.svelte
@@ -0,0 +1,82 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import FileUpload from "./shared/FileUpload.svelte";
+
+	//     export const meta = {
+	//         title: "Components/FileUpload",
+	//         component: FileUpload,
+	//         argTypes: {
+	//             value: {
+	//                 control: "text",
+	//                 description: "The URL or filepath (or list of URLs or filepaths)",
+	//                 name: "value",
+	//                 value: []
+	//             },
+	//             file_count: {
+	//                 control: "radio",
+	//                 options: ["single", "multiple"],
+	//                 description: "Whether to allow single or multiple files to be uploaded",
+	//                 name: "file_count",
+	//                 value: "single"
+	//             },
+	//         }
+	//   }
+</script>
+
+<Meta
+	title="Components/FileUpload"
+	component={FileUpload}
+	argTypes={{
+		value: {
+			control: "text",
+			description: "The URL or filepath (or list of URLs or filepaths)",
+			name: "value",
+			value: []
+		},
+		file_count: {
+			control: "radio",
+			options: ["single", "multiple"],
+			description: "Whether to allow single or multiple files to be uploaded",
+			name: "file_count",
+			value: "single"
+		}
+	}}
+/>
+
+<Template let:args>
+	<FileUpload {...args} i18n={{ "file.uploading": "Uploading" }} />
+</Template>
+
+<Story
+	name="Single File"
+	args={{
+		value: [
+			{
+				path: "cheetah.jpg",
+				orig_name: "cheetah.jpg",
+				url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+				size: 10000
+			}
+		],
+		file_count: "single"
+	}}
+/>
+<Story
+	name="Multiple files"
+	args={{
+		value: Array(2).fill({
+			path: "cheetah.jpg",
+			orig_name: "cheetah.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			size: 10000
+		}),
+		file_count: "multiple"
+	}}
+/>
+<Story
+	name="No value"
+	args={{
+		value: null,
+		file_count: "multiple"
+	}}
+/>
diff --git a/js/file/shared/FileUpload.svelte b/js/file/shared/FileUpload.svelte
index 026ea4efcf543..be6c4eaeb9560 100644
--- a/js/file/shared/FileUpload.svelte
+++ b/js/file/shared/FileUpload.svelte
@@ -67,7 +67,7 @@
 	label={label || "File"}
 />
 
-{#if value && (Array.isArray(value) ? value.length > 0 : false)}
+{#if value && (Array.isArray(value) ? value.length > 0 : true)}
 	<ModifyUpload {i18n} on:clear={handle_clear} absolute />
 	<FilePreview {i18n} on:select {selectable} {value} {height} />
 {:else}