Add .select() and .input() events to gr.FileExplorer
#12537
Conversation
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-pypi-previews.s3.amazonaws.com/369c96f055051e3fbb180de2814ac15fcd7b0cca/gradio-6.1.0-py3-none-any.whlInstall Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@369c96f055051e3fbb180de2814ac15fcd7b0cca#subdirectory=client/python"Install Gradio JS Client from this PR npm install https://gradio-npm-previews.s3.amazonaws.com/369c96f055051e3fbb180de2814ac15fcd7b0cca/gradio-client-2.0.0.tgz |
🦄 change detectedThis Pull Request includes changes to the following packages.
✅ Changeset approved by @abidlabs
|
There was a problem hiding this comment.
The formatter script is catching these changes for me. I think they look reasonable anyways.
There was a problem hiding this comment.
What version of ruff are you on?
There was a problem hiding this comment.
Ah yeah I was using a later version of ruff. Let me revert
freddyaboulton
left a comment
freddyaboulton
left a comment
There was a problem hiding this comment.
Great PR @abidlabs ! Left a comment on the select event for interactive file explorers. There is also a failing e2e test for the file explorer component. Looks good otherwise though!
| tabindex={selectable ? 0 : undefined} | ||
| on:click|stopPropagation={() => { | ||
| if (selectable) { | ||
| handle_select([...index_path, i], [...path, name], type); |
There was a problem hiding this comment.
If the file explorer is interactive, clicking on the textbox does not trigger the select event. Only clicking on the name triggers the select event. which is not intuitive
There was a problem hiding this comment.
You'd suggest triggering the select event if either the checkbox is clicked or the filename is clicked? I feel like they are different UI interactions so they should correspond to different events, but I don't feel too strongly
There was a problem hiding this comment.
Yea I originally thought the select event was not working because I was clicking the checkboxes and it was not triggering
|
Thanks @freddyaboulton for the review, addressed and merging in now. |
|
Thank you @abidlabs ! Will do a release by end of week to ship this |
This PR adds a
.select()and.input()event togr.FileExplorer. The.input()is like.change()but only fires with user interactions. The.select()event allows selecting individual files/directories in the FileExplorer.I've also changed the UI a little bit for the FileExplorer. The
valueparameter is used to designate the selected files in the FileExplorer. I think it's rarely used when FileExplorer is non-interactive, but in the rare cases it might be used to output a subset of files, the current UI of showing the value as disabled checkboxes is not great. I've replaced with a background behind the respective files/folders:If you add a
.select()event, then you can then select individual files. Here's what the UI looks like:Screen.Recording.2025-12-09.at.1.12.34.PM.mov
The updated
demo/file_explorer_component_events/run.pyfile shows all this.Closes: #12253
Closes: #12519