From 42a9c2688f2b251381d814caf87242ff3f94a8c5 Mon Sep 17 00:00:00 2001
From: Dawood Khan <dawoodkhan82@gmail.com>
Date: Thu, 15 Sep 2022 14:40:59 -0400
Subject: [PATCH] Fix Multiple File Examples (#2267)

* fix multiple file examples

* format

* fix

* change demo name zip_files

* change func names
---
 .../files/titanic.csv                         |   0
 demo/zip_files/run.py                         |  24 +++++++++++++++++
 .../screenshot.png                            | Bin
 demo/zip_two_files/run.py                     |  25 ------------------
 gradio/components.py                          |  11 +++++---
 scripts/copy_demos.py                         |   2 +-
 .../Dataset/ExampleComponents/File.svelte     |   6 ++++-
 7 files changed, 37 insertions(+), 31 deletions(-)
 rename demo/{zip_two_files => zip_files}/files/titanic.csv (100%)
 create mode 100644 demo/zip_files/run.py
 rename demo/{zip_two_files => zip_files}/screenshot.png (100%)
 delete mode 100644 demo/zip_two_files/run.py

diff --git a/demo/zip_two_files/files/titanic.csv b/demo/zip_files/files/titanic.csv
similarity index 100%
rename from demo/zip_two_files/files/titanic.csv
rename to demo/zip_files/files/titanic.csv
diff --git a/demo/zip_files/run.py b/demo/zip_files/run.py
new file mode 100644
index 0000000000..712844ef62
--- /dev/null
+++ b/demo/zip_files/run.py
@@ -0,0 +1,24 @@
+import os
+from zipfile import ZipFile
+
+import gradio as gr
+
+
+def zip_files(files):
+    with ZipFile("tmp.zip", "w") as zipObj:
+        for idx, file in enumerate(files):
+            zipObj.write(file.name, "file" + str(idx))
+    return "tmp.zip"
+
+demo = gr.Interface(
+    zip_files,
+    gr.File(file_count="multiple"),
+    "file",
+    examples=[[[os.path.join(os.path.dirname(__file__),"files/titanic.csv"), 
+    os.path.join(os.path.dirname(__file__),"files/titanic.csv"), 
+    os.path.join(os.path.dirname(__file__),"files/titanic.csv")]]], 
+    cache_examples=True
+)
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/zip_two_files/screenshot.png b/demo/zip_files/screenshot.png
similarity index 100%
rename from demo/zip_two_files/screenshot.png
rename to demo/zip_files/screenshot.png
diff --git a/demo/zip_two_files/run.py b/demo/zip_two_files/run.py
deleted file mode 100644
index 29c1b015ed..0000000000
--- a/demo/zip_two_files/run.py
+++ /dev/null
@@ -1,25 +0,0 @@
-import os
-from zipfile import ZipFile
-
-import gradio as gr
-
-
-def zip_two_files(file1, file2):
-    with ZipFile("tmp.zip", "w") as zipObj:
-        zipObj.write(file1.name, "file1")
-        zipObj.write(file2.name, "file2")
-    return "tmp.zip"
-
-
-demo = gr.Interface(
-    zip_two_files,
-    ["file", "file"],
-    "file",
-    examples=[
-        [os.path.join(os.path.dirname(__file__),"files/titanic.csv"), 
-         os.path.join(os.path.dirname(__file__),"files/titanic.csv")],
-    ],
-)
-
-if __name__ == "__main__":
-    demo.launch()
diff --git a/gradio/components.py b/gradio/components.py
index 4ae5539d17..01cbd2db7a 100644
--- a/gradio/components.py
+++ b/gradio/components.py
@@ -2000,7 +2000,7 @@ class File(Changeable, Clearable, IOComponent, FileSerializable):
     Preprocessing: passes the uploaded file as a {file-object} or {List[file-object]} depending on `file_count` (or a {bytes}/{List{bytes}} depending on `type`)
     Postprocessing: expects function to return a {str} path to a file, or {List[str]} consisting of paths to files.
     Examples-format: a {str} path to a local file that populates the component.
-    Demos: zip_to_json, zip_two_files
+    Demos: zip_to_json, zip_files
     """
 
     def __init__(
@@ -2133,7 +2133,7 @@ class File(Changeable, Clearable, IOComponent, FileSerializable):
                 {
                     "orig_name": os.path.basename(file),
                     "name": processing_utils.create_tmp_copy_of_file(
-                        file, self.temp_dir
+                        file, dir=self.temp_dir
                     ).name,
                     "size": os.path.getsize(file),
                     "data": None,
@@ -2171,8 +2171,11 @@ class File(Changeable, Clearable, IOComponent, FileSerializable):
             rounded=rounded,
         )
 
-    def as_example(self, input_data: str) -> str:
-        return Path(input_data).name
+    def as_example(self, input_data: str | List) -> str:
+        if isinstance(input_data, list):
+            return [Path(file).name for file in input_data]
+        else:
+            return Path(input_data).name
 
 
 @document("change", "style")
diff --git a/scripts/copy_demos.py b/scripts/copy_demos.py
index 5c8b3f5663..872135bfc7 100644
--- a/scripts/copy_demos.py
+++ b/scripts/copy_demos.py
@@ -31,7 +31,7 @@ def copy_all_demos(source_dir: str, dest_dir: str):
         "sst_or_tts",
         "stream_audio",
         "stream_frames",
-        "zip_two_files",
+        "zip_files",
     ]
     for demo in demos_to_copy:
         shutil.copytree(
diff --git a/ui/packages/app/src/components/Dataset/ExampleComponents/File.svelte b/ui/packages/app/src/components/Dataset/ExampleComponents/File.svelte
index b5d7aa1853..25f71ace6e 100644
--- a/ui/packages/app/src/components/Dataset/ExampleComponents/File.svelte
+++ b/ui/packages/app/src/components/Dataset/ExampleComponents/File.svelte
@@ -3,4 +3,8 @@
 	export let value: FileData;
 </script>
 
-<div class="truncate">{value}</div>
+{#if Array.isArray(value)}
+	<div class="truncate">{value.join(", ")}</div>
+{:else}
+	<div class="truncate">{value}</div>
+{/if}