From 5d51fbce7826da840a2fd4940feb5d9ad6f1bc5a Mon Sep 17 00:00:00 2001 From: Dawood Khan Date: Wed, 13 Dec 2023 17:48:39 -0500 Subject: [PATCH] Fixes Drag and Drop for Upload (#6525) * fix * add changeset * tests * Update package.json * Hotfix: version on changelog (#6559) * clog version * add changeset --------- Co-authored-by: gradio-pr-bot * Fix version in other changelog (#6561) * Fix version in other changelog why do we have 2? * remove changeset * Ensure Chatbot messages are properly aligned when `rtl` is true (#6574) * fix text alignment when rtl is true * add changeset --------- Co-authored-by: gradio-pr-bot * Improve like/dislike functionality (#6572) * amend like/dislike logic * add like/dislike to chatbot demo and add e2e test * add changeset * e2e test changes * revert chatbot_component changes * tweak * generate notebooks * tweak --------- Co-authored-by: gradio-pr-bot * Fix typo envrion -> environ (#6585) * Feat: make UploadButton accept icon (#6584) * feat: make UploadButton accept icon * add changeset * add proxy url prop * add stories --------- Co-authored-by: Abubakar Abid Co-authored-by: gradio-pr-bot * Make FileExplorer work on python 3.8 and 3.9. Also make it update on changes to root, glob, or glob_dir (#6550) * Add code * add changeset * add changeset * Add test * fix --------- Co-authored-by: gradio-pr-bot * Fix uploaded file wasn't moved to custom temp dir at different disks (#6565) * Fix uploaded file wasn't moved to custom temp dir at different disks * add changeset * Update routes.py --------- Co-authored-by: gradio-pr-bot Co-authored-by: Freddy Boulton * Fix the docstring decoration (#5885) * Fix the docstring of the `Slider` class * add changeset * Update the JSON file generator to output a new field .styled_description to render the inline code syntax in the description field * add changeset * Update style_types() to deal with backticks and single asterisks * Update the inline style converter to use regex for the curly bracket syntax as well * Revert `style_types()` not to touch the `description` field and update the frontend code to apply styling to such formatted texts on Svelte's side * Apply the inline styler to other `.description` field appearances * Apply the inline styler to `.preprocessing`, `.postprocessing`, `.examples-format`, `.events`, and `*.parameters.doc` * Stop applying HTML styles to the JSON data, instaed apply HTML escaping * Escape HTML tokens in .parameters[]["doc"] too * fixes --------- Co-authored-by: gradio-pr-bot Co-authored-by: Ali Abdalla * chore(deps): update all non-major dependencies (#6593) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency jsdom to v23 (#6582) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Abubakar Abid * Update zh-CN.json (#6512) * Update zh-CN.json * add changeset * format --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid * Fix: Gradio Client work with private Spaces (#6602) * client with private space * add changeset * lint * add test --------- Co-authored-by: gradio-pr-bot * Update file_explorer.py - Fixing error if nothing selected in file_count=single mode (return None rather) (#6607) * Update file_explorer.py Fixing error if nothing selected in file_count=single mode (return None rather) * add changeset * added unit tests --------- Co-authored-by: Abubakar Abid Co-authored-by: gradio-pr-bot * Remove 2 slider demos from docs (#6624) * remove 2 slider demos * add changeset --------- Co-authored-by: gradio-pr-bot * Fix encoding issue #6364 of reload mode (#6622) * fix: configure default encoding as utf-8 * apply doc change for the fix * apply cn doc change for the fix * add changeset * Lint --------- Co-authored-by: Freddy Boulton Co-authored-by: gradio-pr-bot * Quick Image + Text Component Fixes (#6635) * fixes * add changeset --------- Co-authored-by: gradio-pr-bot * Improve video trimming and error handling (#6566) * amend trimming logic and return original file when error occurs * add interactive story test * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot * Add `show_recording_waveform` to Audio (#6551) * add show_recording_waveform * add changeset * add animation * Refactor audio component and waveform options * formatting * add margin before audio controls * amend default values * expose gr.WaveformOptions * Tweak waveform options types and handle none * add waveform_options to reverse_audio * tweak bool typing * notebook --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid * chore(deps): update dependency chromatic to v10 (#6619) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update chromaui/action action to v10 (#6618) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Add concurrency_limit to ChatInterface, add IDE support for concurrency_limit (#6653) * concurrency limit chat interface * add changeset * Update gradio/chat_interface.py Co-authored-by: Abubakar Abid --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid * format (#6658) * Removes smooth scrolling from website (#6650) * smooth scrolling with css * add changeset * formatting * remove smooth scrolling * add changeset --------- Co-authored-by: gradio-pr-bot * chore: update versions (#6575) Co-authored-by: github-actions[bot] * Fix reload mode warning about not being able to find the app (#6660) * Fix warning * add changeset * Use * --------- Co-authored-by: gradio-pr-bot * Update HF token used in CI tests (#6671) * fix tests * format * fixes * add changeset * fixes * fix * fix * update * update * test client * format * hf token 2 * add changeset * add env * add envs * tests * env * fixes * test external * add changeset --------- Co-authored-by: gradio-pr-bot * use gr.Error for audio length errors (#6672) * use gr.Error for audio length errors * add changeset --------- Co-authored-by: gradio-pr-bot * Issue 5245: consolidate usage of requests and httpx (#6598) * issue 5245 commit 1 * formatted * add changeset * fixes * fixes * make changes in client too * remove requests from client * add changeset * add changeset * Fixes to test_utils.py in client * fixes in client utils.py and test_utils.py --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid * Remove Discourse Forum Link from Website (#6679) * remove forum link * add changeset --------- Co-authored-by: gradio-pr-bot * Tweak to our bug issue template (#6677) * template * add timeouts * add changeset --------- Co-authored-by: gradio-pr-bot * Set gradio api server from env (#6666) * Use GRADIO_API_SERVER env * Format the code * add changeset * Use env GRADIO_SHARE_SERVER_ADDRESS as default share_server_address --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid * Render each app in the PR's spaces preview in a separate page (#6657) * Use template response * minor fix * Return type hint * add changeset * Remove return types * response_class=None * Use relative path * SPA * remove pydantic pin * Revert * delete changeset * Overflow hidden on body * text gray * Collapsible sidebar * max-height * Use search params * document.location.search --------- Co-authored-by: gradio-pr-bot * perf guide (#6673) * switch from black to ruff formatter (#6543) * migrate from black to ruff * fix script and dependencies * applying ruff * add changeset * add changeset * address ruff feedback * replace linter * fixed typing * fix typing --------- Co-authored-by: Abubakar Abid Co-authored-by: gradio-pr-bot * Cause `gr.ClearButton` to reset the value of `gr.State` (#6680) * state * note * add changeset * buttons * clear button * lint * if * clear' * reset state * fix test --------- Co-authored-by: gradio-pr-bot * Fix dropdown blur bug when values are provided as tuples (#6694) * fix dropdown blur bug * add changeset --------- Co-authored-by: gradio-pr-bot * type fix * test * Remove the styles from the Image/Video primitive components and Fix the container styles (#6726) * Remove the styles from the Image/Video primitive components and Fix the container styles * add changeset * Fix image example size styles * Remove border from image/Example with type=gallery --------- Co-authored-by: gradio-pr-bot * test fix * add changeset * test fix * add changeset * test * test fix * test fix audio video * format * fix obj file issue --------- Co-authored-by: gradio-pr-bot Co-authored-by: Abubakar Abid Co-authored-by: Hannah Co-authored-by: Simon Duerr Co-authored-by: Xiang Liao Co-authored-by: Freddy Boulton Co-authored-by: Dody Suria Wijaya Co-authored-by: Yuichiro Tachibana (Tsuchiya) Co-authored-by: Ali Abdalla Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: yanlin <59528590+cibimo@users.noreply.github.com> Co-authored-by: v-chabaux <149407738+v-chabaux@users.noreply.github.com> Co-authored-by: Lihao Lei Co-authored-by: pngwn Co-authored-by: github-actions[bot] Co-authored-by: cswamy <101974014+cswamy@users.noreply.github.com> Co-authored-by: aisensiy Co-authored-by: D V <77478658+DarhkVoyd@users.noreply.github.com> --- .changeset/modern-clubs-march.md | 7 ++++ js/app/test/model3d_component_events.spec.ts | 16 +++++++- js/model3D/shared/Model3DUpload.svelte | 2 +- js/upload/src/Upload.svelte | 39 +++++++++++++++----- 4 files changed, 52 insertions(+), 12 deletions(-) create mode 100644 .changeset/modern-clubs-march.md diff --git a/.changeset/modern-clubs-march.md b/.changeset/modern-clubs-march.md new file mode 100644 index 0000000000..e45079e16b --- /dev/null +++ b/.changeset/modern-clubs-march.md @@ -0,0 +1,7 @@ +--- +"@gradio/model3d": patch +"@gradio/upload": patch +"gradio": patch +--- + +fix:Fixes Drag and Drop for Upload diff --git a/js/app/test/model3d_component_events.spec.ts b/js/app/test/model3d_component_events.spec.ts index 98d73843e7..76a69817e1 100644 --- a/js/app/test/model3d_component_events.spec.ts +++ b/js/app/test/model3d_component_events.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from "@gradio/tootils"; +import { test, expect, drag_and_drop_file } from "@gradio/tootils"; test("Model3D click-to-upload uploads file successfuly. Upload and clear events work correctly. Downloading works.", async ({ page @@ -25,3 +25,17 @@ test("Model3D click-to-upload uploads file successfuly. Upload and clear events const download = await downloadPromise; await expect(download.suggestedFilename()).toBe("face.obj"); }); + +test("Model3D drag-and-drop uploads a file to the server correctly.", async ({ + page +}) => { + await drag_and_drop_file( + page, + "input[type=file]", + "./test/files/face.obj", + "face.obj" + ); + await page.waitForResponse("**/upload?*"); + await expect(page.getByLabel("# Change Events")).toHaveValue("1"); + await expect(page.getByLabel("# Upload Events")).toHaveValue("1"); +}); diff --git a/js/model3D/shared/Model3DUpload.svelte b/js/model3D/shared/Model3DUpload.svelte index 89816faac3..4977602457 100644 --- a/js/model3D/shared/Model3DUpload.svelte +++ b/js/model3D/shared/Model3DUpload.svelte @@ -109,7 +109,7 @@ diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte index d7feddc3f3..be104c5cdc 100644 --- a/js/upload/src/Upload.svelte +++ b/js/upload/src/Upload.svelte @@ -5,7 +5,7 @@ import { _ } from "svelte-i18n"; import UploadProgress from "./UploadProgress.svelte"; - export let filetype: string | null = null; + export let filetype: string | string[] | null = null; export let dragging = false; export let boundedheight = true; export let center = true; @@ -20,6 +20,7 @@ let upload_id: string; let file_data: FileData[]; + let accept_file_types: string | null; // Needed for wasm support const upload_fn = getContext("upload_files"); @@ -28,6 +29,17 @@ const dispatch = createEventDispatcher(); + $: if (filetype == null || typeof filetype === "string") { + accept_file_types = filetype; + } else { + filetype = filetype.map((x) => { + if (x.startsWith(".")) { + return x; + } + return x + "/*"; + }); + accept_file_types = filetype.join(", "); + } function updateDragging(): void { dragging = !dragging; } @@ -76,17 +88,23 @@ } function is_valid_mimetype( - file_accept: string | null, + file_accept: string | string[] | null, mime_type: string ): boolean { - if (!file_accept) { + if (!file_accept || file_accept === "*" || file_accept === "file/*") { return true; } - if (file_accept === "*") { - return true; + if (typeof file_accept === "string" && file_accept.endsWith("/*")) { + file_accept = file_accept.split(","); } - if (file_accept.endsWith("/*")) { - return mime_type.startsWith(file_accept.slice(0, -1)); + if (Array.isArray(file_accept)) { + return ( + file_accept.includes(mime_type) || + file_accept.some((type) => { + const [category] = type.split("/"); + return type.endsWith("/*") && mime_type.startsWith(category + "/"); + }) + ); } return file_accept === mime_type; } @@ -96,13 +114,14 @@ if (!e.dataTransfer?.files) return; const files_to_load = Array.from(e.dataTransfer.files).filter((f) => { - if (filetype?.split(",").some((m) => is_valid_mimetype(m, f.type))) { + const file_extension = + f.type !== "" ? f.type : "." + f.name.split(".").pop(); + if (file_extension && is_valid_mimetype(filetype, file_extension)) { return true; } dispatch("error", `Invalid file type only ${filetype} allowed.`); return false; }); - await load_files(files_to_load); } @@ -137,7 +156,7 @@ type="file" bind:this={hidden_upload} on:change={load_files_from_upload} - accept={filetype} + accept={accept_file_types} multiple={file_count === "multiple" || undefined} webkitdirectory={file_count === "directory" || undefined} mozdirectory={file_count === "directory" || undefined}