FileUpload
ui.widgets.FileUploadファイル選択とドロップ先。
BEHAVIOR CONTRACT
Browse、ドロップゾーン、ファイル一覧、アプリのコールバックが一つのテスト可能な状態にまとまります。
RECORDED INTERACTION
harness が Browse… をクリックし、story が決定的なファイルパスを書き戻します。
pub fn buildFileUpload(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const c = try col(cx, 12);
const story = try cx.bindState(FileUploadStory, .{ .state = undefined });
const fu = try ui.widgets.FileUpload(.{
.width = 380,
.on_browse = cx.on(FileUploadStory, story, FileUploadStory.browse),
}, scope, cx);
story.state = fu.state;
fu.wrapper.meta.ownership.meta.test_id = "story.upload.wrapper";
// 拖放 drop zone:e2e 用 dragAt 往这块矩形里注入 entered/dropped
fu.state.drop_zone.meta.ownership.meta.test_id = "story.upload.dropzone";
try c.appendChild(a, fu.wrapper);
return c;
}Storybook にあるこの story のコードそのままです(zenit 5f9add5+wip 2026-09-30)。W は ui.widgets のことで、col / row / label は Storybook 内の小さなレイアウトヘルパーです。
FileUploadProps
ui.widgets.FileUploadfn mountFileUpload(props: FileUploadProps, scope: *Scope, cx: *Cx) !FileUploadMountフィールド
型
デフォルト値
説明
widthf32360—
max_filesusize8—
hint[]const u8"Click Browse to add files"—
on_browse?core.HandlerRefnullBrowse 按钮回调(宿主调起对话框后用 state.addFile 回填)。 null = 默认原生 NSOpenPanel(cx.openFilePanel)。
on_change?core.HandlerRefnull文件列表变化回调
FileUploadMount
ui.widgets.FileUploadフィールド
型
デフォルト値
説明
wrapper*Node—
—
state*FileUploadState—
—