Update FileChooser examples for the redesigned component#860
Merged
Conversation
Adopts the new `Accept` object form for the `FileChooser.accept` prop, keyed by MIME type with extension arrays as values. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Resolved FileChooser-caller conflicts in favor of the redesign usage: - FileChooserPanel: kept the no-prop fileChooser() form (develop's side was the prior enableMulti/showFileGrid/targetText design). - FileManagerModel: kept both develop's telemetryPrefix and the branch's acceptedFileTypes; dropped stale post-runner load code (now handled inside the CallContext runner block) and the orphaned isEmpty import.
Add toolbar controls for accepted types (picker), max files, and max file size that re-create the chooser on change - letting the empty-state hint be exercised across different configurations.
- Added a `Target` segmented control (left / top / hidden) exercising the new `dropTargetPlacement` prop; split the demo into config / image sub-panels. - Added a second single-image chooser demonstrating a custom `fileDisplay` that previews the selected PNG in place, with a replace / clear footer. - Example panels defend their size (wrapper scrolls) and show a 1px border.
Convert the section-banner / line comments above the demo factories (configChooserPanel, imageChooserPanel, imagePreview) to JSDoc doc comments.
jskupsik
approved these changes
Jun 4, 2026
lbwexler
added a commit
to xh/hoist-react
that referenced
this pull request
Jun 4, 2026
Comprehensive redesign of `FileChooser`, building on the react-dropzone `15.x` upgrade already on `develop` (via #4381). **Companion Toolbox PR:** xh/toolbox#860 ### Highlights - **Configuration moved to `FileChooserModel`** — `accept`, file-size limits, and other options are now set on the model constructor rather than as component props. - **Empty & single-file states** — the empty target is click-anywhere-to-browse, with a prompt and an auto-derived hint summarizing accepted types / size limits. In single-file mode (`maxFiles: 1`) a selected file renders as a compact card (type-specific icon, name, size) that doubles as a replace target plus a remove action, rather than a one-row grid. - **Multi-file state** — once files are selected, a persistent drop target sits alongside the grid so users can keep adding files; placement is set via the `dropTargetPlacement` prop (`left` / `top` / `hidden`), and it disables clearly at the `maxFiles` limit. - **Customizable display API** — new `emptyDisplay` / `fileDisplay` content props replace the former `targetText` / `showFileGrid`. Default `fileDisplay` is a file grid, or the single-file card when `maxFiles` is 1. - **New capabilities** — `maxFiles` limit (#3570), `onFileAccepted` / `onFileRejected` callbacks, configurable rejection toasts, `maskOnDrag` / `maskOnDisabled`, and a programmatic `openFileBrowser()`. - **API changes** — renamed `maxSize`/`minSize` → `maxFileSize`/`minFileSize`; removed `enableMulti`/`enableAddMulti` (use `maxFiles`); Also caught the branch up with `develop` and fixed a `filesize` v11 named-import bug. See CHANGELOG for breaking-change details. --------- Co-authored-by: petedarinzo <peter.darinzo@gmail.com> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: Anselm McClain <atm@xh.io>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Companion to the
FileChooserredesign in xh/hoist-react#4385 - updates the Toolbox examples to the newFileChooserModelconfig API and demonstrates the new display options.Other › FileChooser) and the File Manager example to the redesigned API (model-configaccept/maxFiles/maxFileSize,onDropAsync, and theemptyDisplay/fileDisplaycontent props).dropTargetPlacement) - re-creating the chooser on config change.fileDisplaythat previews the selected PNG in place, with a replace / clear footer.Should be merged in coordination with xh/hoist-react#4385, as the examples consume the new API.