Ensure File component uploads files to the server. (#5253)

* fix dynamic -> interactive * fix checks * add changeset * add changeset * fix changeset * fix linting issues * fix typing issue --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Aug 17, 2023 · ddac7e4 · ddac7e4
1 parent c57d4c2
commit ddac7e4
Show file tree

Hide file tree

Showing 32 changed files with 58 additions and 126 deletions.
diff --git a/.changeset/curly-hands-carry.md b/.changeset/curly-hands-carry.md
@@ -0,0 +1,6 @@
+---
+"@gradio/file": minor
+"gradio": minor
+---
+
+fix:Ensure File component uploads files to the server.
diff --git a/.config/.prettierignore b/.config/.prettierignore
@@ -23,4 +23,5 @@
 **/.vscode/**
 sweep.yaml
 **/.vercel/**
-**/build/**
+**/build/**
+**/*.md
diff --git a/guides/08_other-tutorials/creating-a-new-component.md b/guides/08_other-tutorials/creating-a-new-component.md
@@ -273,7 +273,7 @@ Here you will have three files, the first file is for the Svelte application, an
 
 	export let loading_status: LoadingStatus;
 
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 </script>
 
 <Block

diff --git a/guides/cn/07_other-tutorials/creating-a-new-component.md b/guides/cn/07_other-tutorials/creating-a-new-component.md
@@ -275,7 +275,7 @@ class TestColorPicker(unittest.TestCase):
 
 	export let loading_status: LoadingStatus;
 
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 </script>
 
 <Block

diff --git a/js/app/src/Login.svelte b/js/app/src/Login.svelte
@@ -52,7 +52,7 @@
 				lines={1}
 				show_label={true}
 				max_lines={1}
-				mode="dynamic"
+				mode="interactive"
 				on:submit={submit}
 				bind:value={username}
 			/>
@@ -61,7 +61,7 @@
 				lines={1}
 				show_label={true}
 				max_lines={1}
-				mode="dynamic"
+				mode="interactive"
 				type="password"
 				on:submit={submit}
 				bind:value={password}

diff --git a/js/audio/index.svelte b/js/audio/index.svelte
@@ -10,7 +10,7 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let value: null | FileData | string = null;
 	export let name: string;
 	export let source: "microphone" | "upload";
@@ -30,12 +30,11 @@
 	export let show_edit_button = true;
 </script>
 
-{#if mode === "dynamic"}
+{#if mode === "interactive"}
 	<Audio
 		{elem_id}
 		{elem_classes}
 		{visible}
-		{mode}
 		bind:value
 		{name}
 		{source}

diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
@@ -23,7 +23,6 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let mode: "static" | "dynamic";
 	export let value: null | FileData | string = null;
 	export let name: string;
 	export let source: "microphone" | "upload";
@@ -56,9 +55,7 @@
 </script>
 
 <Block
-	variant={mode === "dynamic" && value === null && source === "upload"
-		? "dashed"
-		: "solid"}
+	variant={value === null && source === "upload" ? "dashed" : "solid"}
 	border_mode={dragging ? "focus" : "base"}
 	padding={false}
 	{elem_id}

diff --git a/js/audio/static/StaticAudio.svelte b/js/audio/static/StaticAudio.svelte
@@ -22,7 +22,7 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let value: null | FileData | string = null;
 	export let source: "microphone" | "upload";
 	export let label: string;
@@ -53,7 +53,7 @@
 </script>
 
 <Block
-	variant={mode === "dynamic" && value === null && source === "upload"
+	variant={mode === "interactive" && value === null && source === "upload"
 		? "dashed"
 		: "solid"}
 	border_mode={dragging ? "focus" : "base"}

diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
@@ -10,20 +10,20 @@
 		label: {
 			control: "text",
 			description: "The textbox label",
-			name: "label",
+			name: "label"
 		},
 		show_label: {
 			options: [true, false],
 			description: "Whether to show the label",
 			control: { type: "boolean" },
-			defaultValue: true,
+			defaultValue: true
 		},
 		rtl: {
 			options: [true, false],
 			description: "Whether to render right-to-left",
 			control: { type: "boolean" },
-			defaultValue: false,
-		},
+			defaultValue: false
+		}
 	}}
 />
 
@@ -33,9 +33,9 @@
 		value={[
 			[
 				"Can you write a function in Python?",
-				"```py\ndef test():\n\tprint(x)\n```",
+				"```py\ndef test():\n\tprint(x)\n```"
 			],
-			["Can you do math?", "$$1+1=2$$"],
+			["Can you do math?", "$$1+1=2$$"]
 		]}
 	/>
 </Template>
@@ -54,7 +54,7 @@
 	name="Chatbot with text rendered right-to-left"
 	args={{
 		rtl: true,
-		latex_delimiters: [{ left: "$$", right: "$$", display: true }],
+		latex_delimiters: [{ left: "$$", right: "$$", display: true }]
 	}}
 />
 
@@ -63,6 +63,6 @@
 	args={{
 		rtl: true,
 		latex_delimiters: [{ left: "$$", right: "$$", display: true }],
-		show_copy_button: true,
+		show_copy_button: true
 	}}
 />
diff --git a/js/chatbot/static/ChatBot.svelte b/js/chatbot/static/ChatBot.svelte
@@ -13,7 +13,7 @@
 		light: (): Promise<typeof import("prismjs/themes/prism.css")> =>
 			import("prismjs/themes/prism.css"),
 		dark: (): Promise<typeof import("prismjs/themes/prism.css")> =>
-			import("prismjs/themes/prism-dark.css"),
+			import("prismjs/themes/prism-dark.css")
 	};
 
 	export let value:
@@ -83,7 +83,7 @@
 	): void {
 		dispatch("select", {
 			index: [i, j],
-			value: message,
+			value: message
 		});
 	}
 </script>

diff --git a/js/chatbot/utils.ts b/js/chatbot/utils.ts
@@ -83,14 +83,18 @@ const renderer: Partial<
 
 		if (!lang) {
 			return (
-				'<div class="code_wrap">' + COPY_BUTTON_CODE + "<pre><code>" +
+				'<div class="code_wrap">' +
+				COPY_BUTTON_CODE +
+				"<pre><code>" +
 				(escaped ? code : escape(code, true)) +
 				"</code></pre></div>\n"
 			);
 		}
 
 		return (
-			'<div class="code_wrap">' + COPY_BUTTON_CODE + '<pre><code class="' +
+			'<div class="code_wrap">' +
+			COPY_BUTTON_CODE +
+			'<pre><code class="' +
 			this.options.langPrefix +
 			escape(lang) +
 			'">' +

diff --git a/js/checkbox/index.svelte b/js/checkbox/index.svelte
@@ -10,7 +10,7 @@
 	export let value_is_output = false;
 	export let label = "Checkbox";
 	export let info: string | undefined = undefined;
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;

diff --git a/js/checkboxgroup/index.svelte b/js/checkboxgroup/index.svelte
@@ -13,7 +13,7 @@
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let label = "Checkbox Group";
 	export let info: string | undefined = undefined;
 	export let show_label: boolean;

diff --git a/js/code/index.svelte b/js/code/index.svelte
@@ -15,7 +15,7 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let label = "Code";
 	export let show_label = true;
 	export let loading_status: LoadingStatus;

diff --git a/js/colorpicker/index.svelte b/js/colorpicker/index.svelte
@@ -18,7 +18,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let interactive: boolean;
 </script>
 

diff --git a/js/dataframe/index.svelte b/js/dataframe/index.svelte
@@ -13,7 +13,7 @@
 	export let elem_classes: string[] = [];
 	export let visible = true;
 	export let value_is_output = false;
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
 	export let label: string | null = null;

diff --git a/js/dropdown/index.svelte b/js/dropdown/index.svelte
@@ -20,7 +20,7 @@
 	export let loading_status: LoadingStatus;
 	export let allow_custom_value = false;
 
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 
 	if (multiselect && !value) {
 		value = [];

diff --git a/js/file/index.svelte b/js/file/index.svelte
@@ -19,7 +19,7 @@
 	export let elem_classes: string[] = [];
 	export let visible = true;
 	export let value: null | FileData | FileData[];
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let root: string;
 	export let label: string;
 	export let show_label: boolean;

diff --git a/js/file/interactive/InteractiveFile.svelte b/js/file/interactive/InteractiveFile.svelte
@@ -21,7 +21,7 @@
 	export let value: null | FileData | FileData[];
 	let old_value: null | FileData | FileData[];
 
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let root: string;
 	export let label: string;
 	export let show_label: boolean;
@@ -62,7 +62,7 @@
 			) {
 				pending_upload = false;
 				dispatch("change");
-			} else if (mode === "dynamic") {
+			} else if (mode === "interactive") {
 				let files = (Array.isArray(_value) ? _value : [_value]).map(
 					(file_data) => file_data.blob!
 				);
@@ -105,7 +105,7 @@
 
 <Block
 	{visible}
-	variant={mode === "dynamic" && value === null ? "dashed" : "solid"}
+	variant={value === null ? "dashed" : "solid"}
 	border_mode={dragging ? "focus" : "base"}
 	padding={false}
 	{elem_id}

diff --git a/js/file/static/StaticFile.svelte b/js/file/static/StaticFile.svelte
@@ -21,7 +21,7 @@
 	export let value: null | FileData | FileData[];
 	let old_value: null | FileData | FileData[];
 
-	export let mode: "static" | "dynamic";
+	export let mode: "static" | "interactive";
 	export let root: string;
 	export let label: string;
 	export let show_label: boolean;
@@ -61,7 +61,7 @@
 			) {
 				pending_upload = false;
 				dispatch("change");
-			} else if (mode === "dynamic") {
+			} else if (mode === "interactive") {
 				let files = (Array.isArray(_value) ? _value : [_value]).map(
 					(file_data) => file_data.blob!
 				);
@@ -104,7 +104,7 @@
 
 <Block
 	{visible}
-	variant={mode === "dynamic" && value === null ? "dashed" : "solid"}
+	variant={value === null ? "dashed" : "solid"}
 	border_mode={dragging ? "focus" : "base"}
 	padding={false}
 	{elem_id}