From 26356a623c4196f48ca236d973a597831743cdb8 Mon Sep 17 00:00:00 2001 From: Dawood Khan Date: Tue, 5 Mar 2024 16:52:22 -0500 Subject: [PATCH] Fixes: Invalid file_type breaks drag and drop (#7559) * file type fix * add changeset * pdf test * format * test fixes * file test fix * file path fix * new test * format --------- Co-authored-by: gradio-pr-bot Co-authored-by: Hannah --- .changeset/fuzzy-shoes-walk.md | 7 ++++++ demo/file_component_events/run.ipynb | 2 +- demo/file_component_events/run.py | 14 ++++++++++++ js/app/test/file_component_events.spec.ts | 24 ++++++++++++++++++++- js/file/shared/FileUpload.svelte | 15 +------------ js/upload/src/Upload.svelte | 26 +++++++++++++++-------- 6 files changed, 63 insertions(+), 25 deletions(-) create mode 100644 .changeset/fuzzy-shoes-walk.md diff --git a/.changeset/fuzzy-shoes-walk.md b/.changeset/fuzzy-shoes-walk.md new file mode 100644 index 0000000000000..765c1c621e454 --- /dev/null +++ b/.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 diff --git a/demo/file_component_events/run.ipynb b/demo/file_component_events/run.ipynb index 14027492c2d1d..90a46080e1753 100644 --- a/demo/file_component_events/run.ipynb +++ b/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} \ No newline at end of file +{"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} \ No newline at end of file diff --git a/demo/file_component_events/run.py b/demo/file_component_events/run.py index 3dc83c0b9bea9..dc0096102601b 100644 --- a/demo/file_component_events/run.py +++ b/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() diff --git a/js/app/test/file_component_events.spec.ts b/js/app/test/file_component_events.spec.ts index 6bfef6868c231..039049c6fb9a3 100644 --- a/js/app/test/file_component_events.spec.ts +++ b/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"); +}); diff --git a/js/file/shared/FileUpload.svelte b/js/file/shared/FileUpload.svelte index 4af1489b5f058..cb650160a2259 100644 --- a/js/file/shared/FileUpload.svelte +++ b/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); @@ -73,7 +60,7 @@ {:else} ("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; }