Fixes: Invalid file_type breaks drag and drop

.changeset/fuzzy-shoes-walk.md

@@ -0,0 +1,7 @@
+---
+"@gradio/file": patch
+"@gradio/upload": patch
+"gradio": patch
+---
+
+fix:Fixes: Invalid file_type breaks drag and drop

demo/file_component_events/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: file_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    \n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component = gr.File(label=\"Upload Single File\", file_count=\"single\")\n", "        with gr.Column():\n", "            output_file_1 = gr.File(label=\"Upload Single File Output\", file_count=\"single\")\n", "            num_load_btn_1 = gr.Number(label=\"# Load Upload Single File\", value=0)\n", "            file_component.upload(lambda s,n: (s, n + 1), [file_component, num_load_btn_1], [output_file_1, num_load_btn_1])\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_multiple = gr.File(label=\"Upload Multiple Files\", file_count=\"multiple\")\n", "        with gr.Column():\n", "            output_file_2 = gr.File(label=\"Upload Multiple Files Output\", file_count=\"multiple\")\n", "            num_load_btn_2 = gr.Number(label=\"# Load Upload Multiple Files\", value=0)\n", "            file_component_multiple.upload(lambda s,n: (s, n + 1), [file_component_multiple, num_load_btn_2], [output_file_2, num_load_btn_2])\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_specific = gr.File(label=\"Upload Multiple Files Image/Video\", file_count=\"multiple\", file_types=[\"image\", \"video\"])\n", "        with gr.Column():\n", "            output_file_3 = gr.File(label=\"Upload Multiple Files Output Image/Video\", file_count=\"multiple\")\n", "            num_load_btn_3 = gr.Number(label=\"# Load Upload Multiple Files Image/Video\", value=0)\n", "            file_component_specific.upload(lambda s,n: (s, n + 1), [file_component_specific, num_load_btn_3], [output_file_3, num_load_btn_3])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: file_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    \n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component = gr.File(label=\"Upload Single File\", file_count=\"single\")\n", "        with gr.Column():\n", "            output_file_1 = gr.File(label=\"Upload Single File Output\", file_count=\"single\")\n", "            num_load_btn_1 = gr.Number(label=\"# Load Upload Single File\", value=0)\n", "            file_component.upload(lambda s,n: (s, n + 1), [file_component, num_load_btn_1], [output_file_1, num_load_btn_1])\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_multiple = gr.File(label=\"Upload Multiple Files\", file_count=\"multiple\")\n", "        with gr.Column():\n", "            output_file_2 = gr.File(label=\"Upload Multiple Files Output\", file_count=\"multiple\")\n", "            num_load_btn_2 = gr.Number(label=\"# Load Upload Multiple Files\", value=0)\n", "            file_component_multiple.upload(lambda s,n: (s, n + 1), [file_component_multiple, num_load_btn_2], [output_file_2, num_load_btn_2])\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_specific = gr.File(label=\"Upload Multiple Files Image/Video\", file_count=\"multiple\", file_types=[\"image\", \"video\"])\n", "        with gr.Column():\n", "            output_file_3 = gr.File(label=\"Upload Multiple Files Output Image/Video\", file_count=\"multiple\")\n", "            num_load_btn_3 = gr.Number(label=\"# Load Upload Multiple Files Image/Video\", value=0)\n", "            file_component_specific.upload(lambda s,n: (s, n + 1), [file_component_specific, num_load_btn_3], [output_file_3, num_load_btn_3])\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_pdf = gr.File(label=\"Upload PDF File\", file_types=[\"pdf\"])\n", "        with gr.Column():\n", "            output_file_4 = gr.File(label=\"Upload PDF File Output\")\n", "            num_load_btn_4 = gr.Number(label=\"# Load Upload PDF File\", value=0)\n", "            file_component_pdf.upload(lambda s,n: (s, n + 1), [file_component_pdf, num_load_btn_4], [output_file_4, num_load_btn_4])\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_invalid = gr.File(label=\"Upload File with Invalid file_types\", file_types=[\"invalid file_type\"])\n", "        with gr.Column():\n", "            output_file_5 = gr.File(label=\"Upload File with Invalid file_types Output\")\n", "            num_load_btn_5 = gr.Number(label=\"# Load Upload File with Invalid file_types\", value=0)\n", "            file_component_invalid.upload(lambda s,n: (s, n + 1), [file_component_invalid, num_load_btn_5], [output_file_5, num_load_btn_5])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/file_component_events/run.py

@@ -23,6 +23,20 @@
             output_file_3 = gr.File(label="Upload Multiple Files Output Image/Video", file_count="multiple")
             num_load_btn_3 = gr.Number(label="# Load Upload Multiple Files Image/Video", value=0)
             file_component_specific.upload(lambda s,n: (s, n + 1), [file_component_specific, num_load_btn_3], [output_file_3, num_load_btn_3])
+    with gr.Row():
+        with gr.Column():
+            file_component_pdf = gr.File(label="Upload PDF File", file_types=["pdf"])
+        with gr.Column():
+            output_file_4 = gr.File(label="Upload PDF File Output")
+            num_load_btn_4 = gr.Number(label="# Load Upload PDF File", value=0)
+            file_component_pdf.upload(lambda s,n: (s, n + 1), [file_component_pdf, num_load_btn_4], [output_file_4, num_load_btn_4])
+    with gr.Row():
+        with gr.Column():
+            file_component_invalid = gr.File(label="Upload File with Invalid file_types", file_types=["invalid file_type"])
+        with gr.Column():
+            output_file_5 = gr.File(label="Upload File with Invalid file_types Output")
+            num_load_btn_5 = gr.Number(label="# Load Upload File with Invalid file_types", value=0)
+            file_component_invalid.upload(lambda s,n: (s, n + 1), [file_component_invalid, num_load_btn_5], [output_file_5, num_load_btn_5])
 
 if __name__ == "__main__":
     demo.launch()

js/app/test/file_component_events.spec.ts

@@ -32,7 +32,7 @@ test("File component drag-and-drop uploads a file to the server correctly.", asy
 test("File component properly handles drag and drop of image and video files.", async ({
 	page
 }) => {
-	const uploader = await page.locator("input[type=file]").last();
+	const uploader = await page.locator("input[type=file]").nth(2);
 	await uploader.setInputFiles(["./test/files/cheetah1.jpg"]);
 
 	// Check that the image file was uploaded
@@ -49,3 +49,25 @@ test("File component properly handles drag and drop of image and video files.",
 		page.getByLabel("# Load Upload Multiple Files Image/Video")
 	).toHaveValue("2");
 });
+
+test("File component properly handles drag and drop of pdf file.", async ({
+	page
+}) => {
+	const uploader = await page.locator("input[type=file]").nth(3);
+	await uploader.setInputFiles(["./test/files/contract.pdf"]);
+
+	// Check that the pdf file was uploaded
+	await expect(page.getByLabel("# Load Upload PDF File")).toHaveValue("1");
+});
+
+test("File component properly handles invalid file_types.", async ({
+	page
+}) => {
+	const uploader = await page.locator("input[type=file]").last();
+	await uploader.setInputFiles(["./test/files/cheetah1.jpg"]);
+
+	// Check that the pdf file was uploaded
+	await expect(
+		page.getByLabel("# Load Upload File with Invalid file_types")
+	).toHaveValue("1");
+});

js/file/shared/FileUpload.svelte

@@ -43,19 +43,6 @@
 		error: string;
 	}>();
 
-	let accept_file_types: string | null;
-	if (file_types == null) {
-		accept_file_types = null;
-	} else {
-		file_types = file_types.map((x) => {
-			if (x.startsWith(".")) {
-				return x;
-			}
-			return x + "/*";
-		});
-		accept_file_types = file_types.join(", ");
-	}
-
 	let dragging = false;
 	$: dispatch("drag", dragging);
 </script>
@@ -73,7 +60,7 @@
 {:else}
 	<Upload
 		on:load={handle_upload}
-		filetype={accept_file_types}
+		filetype={file_types}
 		{file_count}
 		{root}
 		bind:dragging

js/upload/src/Upload.svelte

@@ -25,19 +25,27 @@
 	const upload_fn = getContext<typeof upload_files>("upload_files");
 
 	let hidden_upload: HTMLInputElement;
-
 	const dispatch = createEventDispatcher();
-	$: if (filetype == null || typeof filetype === "string") {
-		accept_file_types = filetype;
+	const validFileTypes = ["image", "video", "audio", "text", "file"];
+	const processFileType = (type: string): string => {
+		if (type.startsWith(".")) {
+			return type;
+		}
+		if (validFileTypes.includes(type)) {
+			return type + "/*";
+		}
+		return "." + type;
+	};
+
+	$: if (filetype == null) {
+		accept_file_types = null;
+	} else if (typeof filetype === "string") {
+		accept_file_types = processFileType(filetype);
 	} else {
-		filetype = filetype.map((x) => {
-			if (x.startsWith(".")) {
-				return x;
-			}
-			return x + "/*";
-		});
+		filetype = filetype.map(processFileType);
 		accept_file_types = filetype.join(", ");
 	}
+
 	function updateDragging(): void {
 		dragging = !dragging;
 	}