diff --git a/.changeset/fuzzy-shoes-walk.md b/.changeset/fuzzy-shoes-walk.md new file mode 100644 index 0000000000..765c1c621e --- /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 14027492c2..90a46080e1 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 3dc83c0b9b..dc00961026 100644 --- a/demo/file_component_events/run.py +++ b/demo/file_component_events/run.py @@ -23,6 +23,20 @@ with gr.Blocks() as demo: 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 6bfef6868c..039049c6fb 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 4af1489b5f..cb650160a2 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; }