Fix Multiple File Examples (#2267)

* fix multiple file examples

* format

* fix

* change demo name zip_files

* change func names

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()

demo/zip_two_files/run.py

@@ -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()

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

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(

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}