mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-02-11 11:19:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixes: Invalid file_type breaks drag and drop (#7559)

Browse Source 
* 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 <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Hannah <hannahblair@users.noreply.github.com>
This commit is contained in:
Dawood Khan 2024-03-05 16:52:22 -05:00 committed by GitHub
parent 4d5789e905
commit 26356a623c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 63 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/fuzzy-shoes-walk.md Normal file
View File

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

2
demo/file_component_events/run.ipynb
View File

@ -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}

14
demo/file_component_events/run.py
View File

@ -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()

24
js/app/test/file_component_events.spec.ts
View File

@ -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");
});

15
js/file/shared/FileUpload.svelte
View File

@ -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

26
js/upload/src/Upload.svelte
View File

@ -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;
}