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—
—