mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-30 11:00:11 +08:00
Fix File drag and drop for specific file_types (#6982)
* fix file drag * add changeset * pr fixes * test * add changeset * tests * fix * type fix * add changeset * functional test fix --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com>
This commit is contained in:
parent
5bc6fca607
commit
3f139c7c99
6
.changeset/sad-horses-find.md
Normal file
6
.changeset/sad-horses-find.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@gradio/upload": patch
|
||||
"gradio": patch
|
||||
---
|
||||
|
||||
fix:Fix File drag and drop for specific file_types
|
1
demo/file_component_events/run.ipynb
Normal file
1
demo/file_component_events/run.ipynb
Normal file
@ -0,0 +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", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
|
21
demo/file_component_events/run.py
Normal file
21
demo/file_component_events/run.py
Normal file
@ -0,0 +1,21 @@
|
||||
import gradio as gr
|
||||
|
||||
with gr.Blocks() as demo:
|
||||
|
||||
with gr.Row():
|
||||
with gr.Column():
|
||||
file_component = gr.File(label="Upload Single File", file_count="single")
|
||||
with gr.Column():
|
||||
output_file_1 = gr.File(label="Upload Single File Output", file_count="single")
|
||||
num_load_btn_1 = gr.Number(label="# Load Upload Single File", value=0)
|
||||
file_component.upload(lambda s,n: (s, n + 1), [file_component, num_load_btn_1], [output_file_1, num_load_btn_1])
|
||||
with gr.Row():
|
||||
with gr.Column():
|
||||
file_component_multiple = gr.File(label="Upload Multiple Files", file_count="multiple")
|
||||
with gr.Column():
|
||||
output_file_2 = gr.File(label="Upload Multiple Files Output", file_count="multiple")
|
||||
num_load_btn_2 = gr.Number(label="# Load Upload Multiple Files", value=0)
|
||||
file_component_multiple.upload(lambda s,n: (s, n + 1), [file_component_multiple, num_load_btn_2], [output_file_2, num_load_btn_2])
|
||||
|
||||
if __name__ == "__main__":
|
||||
demo.launch()
|
53
js/app/test/file_component_events.spec.ts
Normal file
53
js/app/test/file_component_events.spec.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import { test, expect, drag_and_drop_file } from "@gradio/tootils";
|
||||
|
||||
test("File component properly dispatches load event for the single file case.", async ({
|
||||
page
|
||||
}) => {
|
||||
await page
|
||||
.getByRole("button", { name: "Drop File Here - or - Click to Upload" })
|
||||
.first()
|
||||
.click();
|
||||
const uploader = await page.getByTestId("file-upload").first();
|
||||
await uploader.setInputFiles(["./test/files/cheetah1.jpg"]);
|
||||
|
||||
await expect(page.getByLabel("# Load Upload Single File")).toHaveValue("1");
|
||||
|
||||
const downloadPromise = page.waitForEvent("download");
|
||||
await page.getByRole("link").nth(0).click();
|
||||
const download = await downloadPromise;
|
||||
await expect(download.suggestedFilename()).toBe("cheetah1.jpg");
|
||||
});
|
||||
|
||||
test("File component properly dispatches load event for the multiple file case.", async ({
|
||||
page
|
||||
}) => {
|
||||
await page
|
||||
.getByRole("button", { name: "Drop File Here - or - Click to Upload" })
|
||||
.last()
|
||||
.click();
|
||||
const uploader = await page.getByTestId("file-upload").last();
|
||||
await uploader.setInputFiles([
|
||||
"./test/files/face.obj",
|
||||
"./test/files/cheetah1.jpg"
|
||||
]);
|
||||
|
||||
await expect(page.getByLabel("# Load Upload Multiple Files")).toHaveValue(
|
||||
"1"
|
||||
);
|
||||
|
||||
const downloadPromise = page.waitForEvent("download");
|
||||
await page.getByRole("link").nth(1).click();
|
||||
const download = await downloadPromise;
|
||||
await expect(download.suggestedFilename()).toBe("cheetah1.jpg");
|
||||
});
|
||||
|
||||
test("File component drag-and-drop uploads a file to the server correctly.", async ({
|
||||
page
|
||||
}) => {
|
||||
await drag_and_drop_file(
|
||||
page,
|
||||
"input[type=file]",
|
||||
"./test/files/alphabet.txt",
|
||||
"alphabet.txt"
|
||||
);
|
||||
});
|
1
js/app/test/files/alphabet.txt
Normal file
1
js/app/test/files/alphabet.txt
Normal file
@ -0,0 +1 @@
|
||||
abcdefghijklmnopqrstuvwxyz
|
@ -129,11 +129,16 @@
|
||||
async function loadFilesFromDrop(e: DragEvent): Promise<void> {
|
||||
dragging = false;
|
||||
if (!e.dataTransfer?.files) return;
|
||||
|
||||
const files_to_load = Array.from(e.dataTransfer.files).filter((f) => {
|
||||
const file_extension =
|
||||
f.type !== "" ? f.type : "." + f.name.split(".").pop();
|
||||
if (file_extension && is_valid_mimetype(filetype, file_extension)) {
|
||||
const files_to_load = Array.from(e.dataTransfer.files).filter((file) => {
|
||||
const file_extension = "." + file.name.split(".").pop();
|
||||
if (file.type && is_valid_mimetype(filetype, file.type)) {
|
||||
return true;
|
||||
}
|
||||
if (
|
||||
file_extension && Array.isArray(filetype)
|
||||
? filetype.includes(file_extension)
|
||||
: file_extension === filetype
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
dispatch("error", `Invalid file type only ${filetype} allowed.`);
|
||||
@ -182,6 +187,7 @@
|
||||
<slot />
|
||||
<input
|
||||
aria-label="file upload"
|
||||
data-testid="file-upload"
|
||||
type="file"
|
||||
bind:this={hidden_upload}
|
||||
on:change={load_files_from_upload}
|
||||
|
Loading…
Reference in New Issue
Block a user