Repository: gradio-app/gradio
Pull request: Fix Multiple File Examples
# Description
Fix issue when trying to use examples with multiple file component. Issue was with dataframe examples not having a proper header. Also updated a demo to use a multiple file component.

![Screen Shot 2022-09-14 at 10 32 43 PM](https://user-images.githubusercontent.com/12725292/190300450-ef6b5a87-05b2-4117-a102-ac6545f754d7.png)


Please include: 
* relevant motivation
* a summary of the change 
* which issue is fixed. 
* any additional dependencies that are required for this change.

Closes: #2205 

# Checklist:

- [ ] I have performed a self-review of my own code
- [ ] My code follows the style guidelines of this project
- [ ] I have commented my code in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes


Problem statement:
Examples for multiple file component not working
### Describe the bug

Examples for multiple file component does not work. `FileSerialize` does not work on a list of files.

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Reproduction

```
import os
from zipfile import ZipFile

import gradio as gr


def zip_two_files(files):
    return files


demo = gr.Interface(
    zip_two_files,
    gr.File(file_count="multiple"),
    gr.File(file_count="multiple"),
    examples=[
        [["files/titanic.csv", "files/titanic.csv"]],
    ]
)

if __name__ == "__main__":
    demo.launch()
```

### Screenshot

_No response_

### Logs

```shell
N/A
```


### System Info

```shell
N/A
```


### Severity

annoying

Hints from issue discussion:

Commit message: format

Patch to review:
diff --git a/demo/zip_two_files/run.py b/demo/zip_two_files/run.py
index 29c1b015ed..a787622856 100644
--- a/demo/zip_two_files/run.py
+++ b/demo/zip_two_files/run.py
@@ -4,21 +4,20 @@
 import gradio as gr
 
 
-def zip_two_files(file1, file2):
+def zip_two_files(files):
     with ZipFile("tmp.zip", "w") as zipObj:
-        zipObj.write(file1.name, "file1")
-        zipObj.write(file2.name, "file2")
+        for idx, file in enumerate(files):
+            zipObj.write(file.name, "file" + str(idx))
     return "tmp.zip"
 
-
 demo = gr.Interface(
     zip_two_files,
-    ["file", "file"],
+    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")],
-    ],
+    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__":
diff --git a/gradio/components.py b/gradio/components.py
index 4ae5539d17..0c2971bcef 100644
--- a/gradio/components.py
+++ b/gradio/components.py
@@ -2133,7 +2133,7 @@ def postprocess(self, y: str) -> Dict:
                 {
                     "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 @@ def style(
             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 input_data
+        else:
+            return Path(input_data).name
 
 
 @document("change", "style")
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}


Code review comments:
diff_hunk: @@ -2171,8 +2171,11 @@ def style(
             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 input_data
path: gradio/components.py
text: @user1:
Can we just show the base names here as well to make it a little cleaner and shorter?
```suggestion
            return [Path(file).name for file in input_data]
```